custom-react-accordion

Accessible, lightweight accordion using React.

Install

npm install --save custom-react-accordion

Custom React Accordion

Demo

Demo available here.

Install

npm install --save custom-react-accordion

Import components

import React from 'react'
import {AccordionWrapper, AccordionItem} from 'custom-react-accordion'
import 'custom-react-accordion/dist/Accordion.css'

Example with JSON

Format your accordion content as JSON data:

const 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 index={2} title={"Item 3"} description={"Lorem ipsum."}/>
</AccordionWrapper>

Props

| Prop | Component | Type | Required | Description | | ----------- | ---------------- | ----------- | ------------------ | ------------------------------- | | Index | AccordionItem | Number | :white_check_mark: | The index of the array. | | Title | AccordionItem | String | :white_check_mark: | Title for each tab. | | Description | AccordionItem | String | :white_check_mark: | 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.

License

MIT © Peter Aiello