react-sanfona
React accordion component
Usage
Install via NPM:
npm install react-sanfona
Then:
import { Accordion, AccordionItem } from 'react-sanfona';
…
render() {
return (
<Accordion>
{[1, 2, 3, 4, 5].map(item => {
return (
<AccordionItem title={`Item ${item}`} expanded={item === 1}>
<div>
{`Item ${item} content`}
</div>
</AccordionItem>
);
})}
</Accordion>
);
}
…options / PropTypes
Accordion
| Property | Type | Description | Default |
|---|---|---|---|
| allowMultiple | Boolean |
Allow multiple items to be open at the same time. | false |
| isHovered | Boolean |
Allow expanding an element after the mouse hovers an item. | false |
| openNextAccordionItem | Boolean |
Opens the next accordion item after the previous one is closed. Defaults first one as active and applies for each accordion item except the last one. | false |
| className | String |
Custom classname applied to root element | null |
| style | Object |
Inline styles applied to root element | null |
| onChange | Function |
Triggered when component updates and passes new state as an argument | null |
| rootTag | String |
Custom HTML tag used for root element | 'div' |
| duration | Number |
Open/close transition duration in milliseconds | 300 |
| easing | String |
Open/close transition easing | 'ease' |
AccordionItem
| Property | Type | Description | Default |
|---|---|---|---|
| title | String/ Object |
Text or Object to display in header. | null |
| expanded | Boolean |
If item body should be expanded or not | false |
| onExpand | Function |
Callback for when item is expanded | null |
| onClose | Function |
Callback for when item closes | null |
| className | String |
Custom classname applied to root item element | null |
| bodyClassName | String |
Custom classname applied to the accordion item body | null |
| expandedClassName | String |
Custom classname applied when accordion is expanded | null |
| titleClassName | String |
Custom classname applied to accordion item header text | null |
| disabled | Boolean |
If item should be disabled or not | false |
| disabledClassName | String |
Custom classname applied to accordion item header text when item is disabled | null |
| rootTag | String |
Custom HTML tag used for root element | 'div' |
| titleTag | String |
Custom HTML tag used for title element | 'h3' |
| bodyTag | String |
Custom HTML tag used for body element | 'div' |
| duration | Number |
Open/close transition duration in milliseconds | 300 |
| easing | String |
Open/close transition easing | 'ease' |
| slug | String |
Slug key to allow indexing by a string |
Styling with classnames
| Classname | Targets |
|---|---|
react-sanfona |
Accordion container |
react-sanfona-item |
AccordionItem container |
react-sanfona-item-expanded |
AccordionItem container when expanded |
react-sanfona-item-title |
AccordionItem header text |
react-sanfona-item-body |
AccordionItem body container |
react-sanfona-item-body-wrapper |
AccordionItem body children wrapper |
react-sanfona-item-disabled |
AccordionItem is disabled |
development
npm install
npm start // served on localhost:8080
npm test