@rontav/react-accessible-accordion v2.4.5-12
Demo
Usage
First, grab the package from npm:
npm install --save react-accessible-accordion react react-dom
Then, import the editor and use it in your code. Here is a basic example:
import React from 'react';
import ReactDOM from 'react-dom';
import {
Accordion,
AccordionItem,
AccordionItemTitle,
AccordionItemBody,
} from 'react-accessible-accordion';
// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';
const Example = () => (
<Accordion>
<AccordionItem>
<AccordionItemTitle>
<h3>Simple title</h3>
</AccordionItemTitle>
<AccordionItemBody>
<p>Body content</p>
</AccordionItemBody>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>
<h3>Complex title</h3>
<div>With a bit of description</div>
</AccordionItemTitle>
<AccordionItemBody>
<p>Body content</p>
</AccordionItemBody>
</AccordionItem>
</Accordion>
);
ReactDOM.render(<Example />, document.querySelector('[data-mount]'));
Styles
We strongly encourage you to write your own styles for your accordions, but we've published these two starter stylesheets to help you get up and running:
// 'Minimal' theme - hide/show the AccordionBody component:
import 'react-accessible-accordion/dist/minimal-example.css';
// 'Fancy' theme - boilerplate styles for all components, as seen on our demo:
import 'react-accessible-accordion/dist/fancy-example.css';
We recommend that you copy them into your own app and modify them to suit your needs, particularly if you're using your own className
s.
API
Accordion
props:
AccordionItem
props:
AccordionItemTitle
props:
AccordionItemBody
props:
resetNextUuid
Accessibility
What this project is doing accessibility-wise?
This project manages two types of Accordions, with single or multiple items open.
Single item
Use this with with props
accordion
set totrue
onAccordion
.
For this type of Accordion, you will get the following role
set up on your elements:
- Accordion:
tablist
- AccordionItem: no specific role
- AccordionItemTitle:
tab
- AccordionItemBody:
tabpanel
Multiple items
For this type of Accordion, you will get the following role
set up on your elements:
Use this with with props
accordion
set tofalse
onAccordion
.
- Accordion: no specific role
- AccordionItem: no specific role
- AccordionItemTitle:
button
- AccordionItemBody: no specific role
Browser support
Supported browser / device versions:
Browser | Device/OS | Version | Notes |
---|---|---|---|
Mobile Safari | iOS | latest | |
Chrome | Android | latest | |
IE | Windows | 11 | |
MS Edge | Windows | latest | |
Chrome | Desktop | latest | |
Firefox | Desktop | latest | |
Safari | OSX | latest |