Tiny, super simple accordion for React ·
Fully responsive, no resize event listeners, no dependencies, minimal markup, <80 LOC.
Codesandbox demo
Installation
npm install react-tiny-accordion
Usage
import Accordion from 'react-tiny-accordion' <Accordion ='accordion'> <div ="Title can be string literals"> Content 1 </div> <div => Content 2 </div></Accordion>
Add some styling
/* Header */ /* Content */
Protip: Check the Codesandbox demo for a more complete styling example.
Props
Prop | Description | Default |
---|---|---|
transitionDuration | Duration of expand/collapse transition. | 500 |
transitionTimingFunction | Speed curve of the transition, can be any valid CSS transition timing function. | 'ease' |
openClassName | The CSS class that should be applied to the currently expanded item. | 'open' |
selectedIndex | Toggling an item can also be done via props. | |
onChange | Event triggered when the user toggle an item, args: index, expanded, selectedIndex. | |
changeOnClick | Set this to false if you only want to expand items via the selectedIndex prop. | true |