@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 | |