Custom React Accordion

Demo

Demo available here.

NPM Package here.

Description

A minimal and accessible accordion app, created using Create React App and exported to NPM using Create React Library.

Install

npm install --save custom-react-accordion

Usage

With JSON (recommended)

Format your accordion content as JSON data:

[
  {
    "title": "Item 1",
    "description": "Lorem ipsum."
  },
  {
    "title": "Item 2",
    "description": "Lorem ipsum."
  }
]

Iterate through JSON and pass in the relevant values as props:

<AccordionWrapper>
    {data.map((item, index) => (
        <AccordionItem key={index} index={index} title={item.title} description={item.description} ></AccordionItem>
    ))}
</AccordionWrapper>

Without JSON

Same format as above, except for adding the props manually:

<AccordionWrapper>
    <AccordionItem index={0} title={"Item 1"} description={"Lorem ipsum."}></AccordionItem>
        <AccordionItem index={1} title={"Item 2"} description={"Lorem ipsum."}></AccordionItem>
        <AccordionItem index={2} title={"Item 3"} description={"Lorem ipsum."}></AccordionItem>
</AccordionWrapper>

Props

Prop	Component	Type	Required	Description
Index	AccordionItem	Number		The index of the array.
Title	AccordionItem	String		Title for each tab.
Description	AccordionItem	String		Text for the open panel.

Accessibility

• Markup includes the appropriate aria attributes (aria-expanded, aria-controls, aria-disabled).
• Accordion is usable with keyboard only (Tab and Shift+Tab to switch and Enter to open tab).
• Tested with the WAVE accessibility tool.

Thank you and good luck!