1.5.0 • Published 4 years ago
react-sanfona v1.5.0
react-sanfona
React accordion component
Usage
Install via NPM:
npm install react-sanfonaThen:
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' |
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 test1.5.0
4 years ago
1.4.0
6 years ago
1.3.0
6 years ago
1.2.3
6 years ago
1.2.2
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.0
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago
1.0.0-rc3
7 years ago
1.0.0-rc2
7 years ago
1.0.0-rc1
7 years ago
0.4.3
7 years ago
0.4.2
7 years ago
0.4.1
7 years ago
0.4.0
7 years ago
0.3.0
7 years ago
0.2.3
7 years ago
0.2.2
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.0
7 years ago
0.0.15
8 years ago
0.0.14
8 years ago
0.0.13
8 years ago
0.0.12
8 years ago
0.0.11
8 years ago
0.0.10
8 years ago
0.0.9
8 years ago
0.0.8
8 years ago
0.0.7
9 years ago
0.0.6
9 years ago
0.0.5
9 years ago
0.0.4
9 years ago
0.0.3
9 years ago
0.0.2
9 years ago
0.0.1
9 years ago