Item render prop

Both the header and children props of AccordionItem component support the render prop pattern, which can be used to access item state, along with a toggle function to open or close the current item.

import { Accordion, AccordionItem } from '@szhsin/react-accordion';

export default function Example() {
  return (
    <Accordion>
      <AccordionItem
        // Accessing item state by giving a function to the `header` prop
        header={({ state }) => `Item expanded: ${state.isEnter}`}
      >
        {({ toggle }) => (
          <>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
              sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua.
            </p>

            {/* `toggle` function is also available from the render prop */}
            <button className="btn" onClick={() => toggle(false)}>
              Close item
            </button>
          </>
        )}
      </AccordionItem>

      <AccordionItem header="Where does it come from?">
        Quisque eget luctus mi, vehicula mollis lorem. Proin fringilla
        vel erat quis sodales. Nam ex enim, eleifend venenatis lectus
        vitae, accumsan auctor mi.
      </AccordionItem>
    </Accordion>
  );
}

tip

While this technique is useful for rendering dynamic content based on item state, in most cases you won't need it for styling purpose. The className prop itself accepts a render prop form which can be used to apply class selectors based on state. Please see the styling docs.

Item expanded: false

Where does it come from?