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} />
    ))}
</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.

peteraiello/custom-react-accordion