Accordion

RhAccordion is a type of container that can hold multiple RhAccordionItem components. The collapsible nature of these items allows users to expand or collapse them based on their preference.

Usage

Once installed, you can import the RhAccordion component into your React application:

copy

import {RhAccordion,RhAccordionItem} from "@rhythm-ui/react"

Then, you can use the RhAccordion component in your JSX code:

copy

<RhAccordion className="flex flex-col gap-4">
  <RhAccordionItem className="card cursor-pointer" title="Accordion 1">
    <div className="px-6 py-3 cursor-default">Accordion 1 Body</div>
  </RhAccordionItem>
  <RhAccordionItem className="card cursor-pointer" title="Accordion 2">
    <div className="px-6 py-3 cursor-default">Accordion 2 Body</div>
  </RhAccordionItem>
</RhAccordion>

Accordion Props

Name	Type	Description
children	Element \| Element[]	JSX Element or array of JSX Elements
multi	boolean	Will enable multiple accordion items can be open at the same time
disable	boolean \| [number]	Will disable accordion item and it can be boolean to disable the whole accordion component or an array to disable specify item based on index
expandAll	boolean	Will expand all the accordion items by default
className	string	ClassName(s) for accordion parent
onClick	(openTab: number[]) => unknown	A function that returns array containing open accordion item ids
tabs	number[]	An array to expand specify accordion item based on index

AccordionItem Props

Name	Type	Description
titleProps	object	An object that contains key-value pairs of props for the title
title	string	A string that represents the title for accordion item
header	ReactElement<any, string \| JSXElementConstructor<any>>	A custom header component for the accordion, represented as a JSX element
iconProps	object	An object that contains key-value pairs of props for the icon
children	string \| Element	JSX element or a string
expandIcon	React.ReactNode	Custom icon used to expand the accordion item represented as a node
collapseIcon	React.ReactNode	Custom icon used to expand the accordion item represented as a node
className	string	ClassName(s) for accordion item
isDisable	boolean	Flag to disable the accordion item
isOpen	boolean	Flag to open the accordion item

Multiple

The multi prop specifies whether multiple accordion items can be expanded at the same time or if only one item can be expanded at a time. When multi is set to true, multiple items can be expanded simultaneously. When it's set to false, only one item can be expanded at a time.

copy

<RhAccordion className="flex flex-col gap-4" multi={true}>
  <RhAccordionItem className="card cursor-pointer" title="Accordion 1">
    <div className="px-6 py-3 cursor-default">Accordion 1 Body</div>
  </RhAccordionItem>
  <RhAccordionItem className="card cursor-pointer" title="Accordion 2">
    <div className="px-6 py-3 cursor-default">Accordion 2 Body</div>
  </RhAccordionItem>
</RhAccordion>

Tabs

The tabs prop is an array of numbers that represents the IDs of the accordion items which needs to be expand.

copy

<RhAccordion className="flex flex-col gap-4" tabs={[0]}>
  <RhAccordionItem className="card cursor-pointer" title="Accordion 1">
    <div className="px-6 py-3 cursor-default">Accordion 1 Body</div>
  </RhAccordionItem>
  <RhAccordionItem className="card cursor-pointer" title="Accordion 2">
    <div className="px-6 py-3 cursor-default">Accordion 2 Body</div>
  </RhAccordionItem>
</RhAccordion>

Disable

The disable prop allows to disable the entire Accordion or specific Accordion items and preventing users from interacting with them. This prop can be set to a boolean to disable the whole accordion component or an array of numbers to disable specific items based on their index.

Here is the example of disable prop with a boolean value

copy

<div className="flex flex-col gap-4">
  <RhAccordion className="flex flex-col gap-4" disable={true}>
    <RhAccordionItem className="card cursor-pointer" title="Accordion 1">
      <div className="px-6 py-3 cursor-default">Accordion 1 Body</div>
    </RhAccordionItem>
    <RhAccordionItem className="card cursor-pointer" title="Accordion 2">
      <div className="px-6 py-3 cursor-default">Accordion 2 Body</div>
    </RhAccordionItem>
  </RhAccordion>
  <RhAccordion className="flex flex-col gap-4" disable={[1]}>
    <RhAccordionItem className="card cursor-pointer" title="Accordion 1">
      <div className="px-6 py-3 cursor-default">Accordion 1 Body</div>
    </RhAccordionItem>
    <RhAccordionItem className="card cursor-pointer" title="Accordion 2">
      <div className="px-6 py-3 cursor-default">Accordion 2 Body</div>
    </RhAccordionItem>
  </RhAccordion>
</div>

Expand All

The expandAll prop specifies whether all accordion items should be expanded by default or not. When set to true, all items will be expanded when the component is mounted.

copy

<RhAccordion className="flex flex-col gap-4" expandAll={true}>
  <RhAccordionItem className="card cursor-pointer" title="Accordion 1">
    <div className="px-6 py-3 cursor-default">Accordion 1 Body</div>
  </RhAccordionItem>
  <RhAccordionItem className="card cursor-pointer" title="Accordion 2">
    <div className="px-6 py-3 cursor-default">Accordion 2 Body</div>
  </RhAccordionItem>
</RhAccordion>

Custom Icons

The expandIcon and collapseIcon props are represented as a nodes. And these specifies custom icons used to expand nd collapse the accordion. The value of this prop should be an iconify string, which is a special syntax for embedding icons in your code.

copy

function CustomIcons() {
  const icons = {
    expandIcon: "heroicons:plus",
    collapseIcon: "heroicons:minus",
  };
  return (
    <div className="p-8 py-4">
      <RhAccordion className="flex flex-col gap-4">
        <RhAccordionItem
          className="card cursor-pointer"
          title="Accordion 1"
          {...icons}
        >
          <div className="px-6 py-3 cursor-default">Accordion 1 Body</div>
        </RhAccordionItem>
        <RhAccordionItem
          className="card cursor-pointer"
          title="Accordion 2"
          {...icons}
        >
          <div className="px-6 py-3 cursor-default">Accordion 2 Body</div>
        </RhAccordionItem>
      </RhAccordion>
    </div>
  );
}

Custom Headers

The header prop of accordion item enables us to create custom header for Accordion which is represented as a JSX element.

copy

function CustomHeader() {
  const [openTab, setOpenTab] = useState([]);
  const CustomHeader = ({ index }) => {
    return (
      <div className="flex-1 flex justify-between items-center">
        <div className="cursor-pointer">
          <div className="font-medium">Some Heading</div>
          <div className="text-sm text-gray-500">
            Lorem ipsum dolor sit amet, consectetur...
          </div>
        </div>
        <div className="flex gap-4 text-gray-500">
          <RhIcon icon="ion:trash" />
          {openTab.includes(index) ? (
            <RhIcon icon="heroicons:chevron-up" />
          ) : (
            <RhIcon icon="heroicons:chevron-down" />
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="p-8">
      <RhAccordion
        onClick={(value) => setOpenTab(value)}
        className="flex flex-col gap-4"
      >
        {[...new Array(2)].map((value, idx) => {
          return (
            <RhAccordionItem
              key={idx}
              header={<CustomHeader index={idx} />}
              className="card"
            >
              <div className="px-6 py-3">Accordion {idx + 1 + ""} Body</div>
            </RhAccordionItem>
          );
        })}
      </RhAccordion>
    </div>
  );
}