@tenaspace/react-headless-accordion

This is an unstyled React component that helps you to easily make the Accordion UI with your style.

Demo

See the DEMO

Installation

yarn add @tenaspace/react-headless-accordion

or via npm

npm install @tenaspace/react-headless-accordion

Usage

Example with Tailwind CSS (Recommend)

import { HeadlessAccordion } from '@tenaspace/react-headless-accordion'

const list = [
  {
    title: 'item 1',
    content:
      'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit atque id accusamus nesciunt illo inventore placeat vitae unde aspernatur, officiis, exercitationem dolorem! Sint sed libero perspiciatis beatae, natus quasi quisquam.',
  },
  {
    title: 'item 2',
    content:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eligendi quidem nam delectus neque consectetur impedit laudantium atque saepe enim maiores corrupti nemo beatae aliquam, expedita dolore esse. Ipsam, quaerat?',
  },
  {
    title: 'item 3',
    content:
      'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia est, deleniti ex veniam voluptatibus ullam saepe. Quia, id dignissimos tenetur numquam velit magni inventore aperiam ducimus perferendis deleniti laborum dicta!',
  },
]

const App = () => {
  return (
    <>
      <HeadlessAccordion defaultActiveKey={[`0`]} className={`border border-black`}>
        {list.map((item, key) => (
          <HeadlessAccordion.Item key={key} eventKey={`${key}`} className={`border border-black`}>
            {({ open }) => {
              return (
                <>
                  <HeadlessAccordion.Button
                    as={`button`}
                    className={`block w-full px-8 py-4 text-left transition-colors duration-300 ${
                      open ? `bg-black text-white` : ``
                    }`}
                  >
                    <span className={`-mx-2 flex flex-nowrap items-center justify-between`}>
                      <span className={`flex-[1_0_0%] px-2`}>{item.title}</span>
                      <span className={`w-auto flex-[0_0_auto] px-2`}>{open ? `-` : `+`}</span>
                    </span>
                  </HeadlessAccordion.Button>
                  <HeadlessAccordion.Panel className={`transition-[max-height] duration-300`}>
                    <div className={`p-8`}>{item.content}</div>
                  </HeadlessAccordion.Panel>
                </>
              )
            }}
          </HeadlessAccordion.Item>
        ))}
      </HeadlessAccordion>
    </>
  )
}

export default App

Example with Style inline

import { HeadlessAccordion } from '@tenaspace/react-headless-accordion'

const list = [
  {
    title: 'item 1',
    content:
      'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit atque id accusamus nesciunt illo inventore placeat vitae unde aspernatur, officiis, exercitationem dolorem! Sint sed libero perspiciatis beatae, natus quasi quisquam.',
  },
  {
    title: 'item 2',
    content:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eligendi quidem nam delectus neque consectetur impedit laudantium atque saepe enim maiores corrupti nemo beatae aliquam, expedita dolore esse. Ipsam, quaerat?',
  },
  {
    title: 'item 3',
    content:
      'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia est, deleniti ex veniam voluptatibus ullam saepe. Quia, id dignissimos tenetur numquam velit magni inventore aperiam ducimus perferendis deleniti laborum dicta!',
  },
]

const App = () => {
  return (
    <>
      <HeadlessAccordion defaultActiveKey={[`0`]} style={{ border: `1px solid black` }}>
        {list.map((item, key) => (
          <HeadlessAccordion.Item key={key} eventKey={`${key}`} style={{ border: `1px solid black` }}>
            {({ open }) => {
              return (
                <>
                  <HeadlessAccordion.Button
                    as={`button`}
                    style={{
                      cursor: `pointer`,
                      display: `block`,
                      width: `100%`,
                      backgroundColor: open ? `black` : ``,
                      padding: `16px 32px`,
                      textAlign: `left`,
                      color: open ? `white` : ``,
                      transitionProperty: `color`,
                      transitionDuration: `0.3s`,
                    }}
                  >
                    <span
                      style={{
                        margin: `0 -8px`,
                        display: `flex`,
                        flexWrap: `nowrap`,
                        alignItems: `center`,
                        justifyContent: `space-between`,
                      }}
                    >
                      <span
                        style={{
                          flex: `1 0 0%`,
                          padding: `0 8px`,
                        }}
                      >
                        {item.title}
                      </span>
                      <span
                        style={{
                          width: `auto`,
                          flex: `0 0 auto`,
                          padding: `0 8px`,
                        }}
                      >
                        {open ? `-` : `+`}
                      </span>
                    </span>
                  </HeadlessAccordion.Button>
                  <HeadlessAccordion.Panel
                    style={{
                      transitionProperty: `max-height`,
                      transitionDuration: `0.3s`,
                    }}
                  >
                    <div
                      style={{
                        padding: `32px`,
                      }}
                    >
                      {item.content}
                    </div>
                  </HeadlessAccordion.Panel>
                </>
              )
            }}
          </HeadlessAccordion.Item>
        ))}
      </HeadlessAccordion>
    </>
  )
}

export default App

Props

Name	Mandatory	Type	Default value	Component	Note
defaultActiveKey	optional	string[]	[]	HeadlessAccordion	Make the item you want open by default in the first load. Ex: ['0', '1'] => Item 1 and Item 2 will be opend in the first load. (The value must match with the eventKey of the HeadlessAccordion.Item)
multipleOpen	optional	boolean	false	HeadlessAccordion	Set it true if you want to open multiple the Item
eventKey	required	string		HeadlessAccordion.Item	The key ID of the Item
as	optional	React.ElementType	div	All	Set the tag HTML like whatever you want
className	optional	string	null	All
style	optional	React.CSSProperties	{}	All