https://github.com/markcarrrr/react-a11y-accordion
A ReactJS accessible accordion utilising the HTML <details> and <summary> tags for native semantics and accessibility.
https://github.com/markcarrrr/react-a11y-accordion
Last synced: 2 months ago
JSON representation
A ReactJS accessible accordion utilising the HTML <details> and <summary> tags for native semantics and accessibility.
- Host: GitHub
- URL: https://github.com/markcarrrr/react-a11y-accordion
- Owner: markcarrrr
- License: other
- Created: 2020-04-16T11:33:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:33:25.000Z (over 3 years ago)
- Last Synced: 2025-04-06T13:49:39.202Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 758 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-a11y-accordion 
A ReactJS accessible accordion utilising the HTML `` and `` tags for native semantics and accessibility.
> Browser support - Can I use HTML5 ``: https://caniuse.com/#feat=details
> Supports React 16.0.0 or newer.
## Installing
```
yarn add @markcarrrr/react-a11y-accordion
```
OR
```
npm install --save @markcarrrr/react-a11y-accordion
```
## Example Usage
```js
import { Accordion, AccordionItem } from '@markcarrrr/react-a11y-accordion';
export default () => (
Accordion content 1.
Accordion content 2.
);
```
## Props
### Required
`header`
- type: `string`
- default: `"react-a11y-accordion"`
Pass in text for the accordion header (output within the `` tag).
```js
import { Accordion, AccordionItem } from '@markcarrrr/react-a11y-accordion';
export default () => (
Accordion content 1.
Accordion content 2.
);
```
### Optional
`onlyOneOpen`
- type: `boolean`
- default: `false`
Allow only one accordion item to be open at any time. Please note if for any reason multiple `open` props are added to the `` child components then only the first item with an `open` prop will be open.
```js
import { Accordion, AccordionItem } from '@markcarrrr/react-a11y-accordion';
export default () => (
Accordion content 1.
Accordion content 2.
);
```
`onSelect`
- type: `(isOpen: boolean, currentId: string): void;`
- default: `undefined`
Callback on accordion item selection. Returns open state and id for selected item.
```js
import { Accordion, AccordionItem } from '@markcarrrr/react-a11y-accordion';
export default () => (
{})}>
Accordion content 1.
Accordion content 2.
);
```
`id`
- type: `string`
- default: auto-generated
Pass in an id for the accordion item wrapper (applied on the `` tag).
```js
import { Accordion, AccordionItem } from '@markcarrrr/react-a11y-accordion';
export default () => (
Accordion content 1.
Accordion content 2.
);
```
`open`
- type: `boolean`
- default: `false`
Add if you want the item open by default (applied on the `` tag). Please note if `onlyOneOpen` has been added to `` and for any reason multiple `open` props are added to the `` child components then only the first item with an `open` prop will be open.
```js
import { Accordion, AccordionItem } from '@markcarrrr/react-a11y-accordion';
export default () => (
Accordion content 1.
Accordion content 2.
);
```
## Styling
There is purposfully no styling added allowing you to style as required from a clean state.
The BEM methodology has been used for classnames.
```html
...
...
```
## Development
### Initial steps
1. `git clone https://github.com/markcarrrr/react-a11y-accordion.git`
1. `yarn install`
### Scripts
#### Build code
`yarn build`
#### Start local dev server
`yarn start`
#### Lint code
`yarn lint`
#### Format code
`yarn format`
#### Run tests
`yarn test`
## Authors
- **Mark Carr** - _Initial work_ - [markcarrrr](https://github.com/markcarrrr)
## License
This project is licensed under the ISC License - see the [LICENSE.md](LICENSE.md) file for details