Accordion

Accordion handles the logic for rendering accordion-type components. It accepts configuration props that determine how the accordion behaves, and leaves the UI implementation up to you.

The immediate child of Accordion is a function that is called with openIndexes and handleClick.

openIndexes is an array containing the index of the currently-open accordion items.

handleClick is a function that should be called with the index of the accordion item that you want to act on.

AccordionContent is a component that has a built-in close animation. You can wrap the content of your accordion in this if you like. It requires an isOpen prop with a boolean value.

Usage

Copy

Copied

<Playground>
  <Accordion>
    {({ openIndexes, handleClick, AccordionContent }) => {
      const items = ["one", "two", "three"];
      return (
        <>
          {items.map((item, index) => (
            <div key={item}>
              <Header onClick={() => handleClick(index)}>toggle</Header>
              <AccordionContent isOpen={openIndexes.includes(index)}>
                {item}
              </AccordionContent>
            </div>
          ))}
        </>
      );
    }}
  </Accordion>
</Playground>