Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daviferreira/react-sanfona
Accessible react accordion component
https://github.com/daviferreira/react-sanfona
accessibility accordion collapsible react
Last synced: 2 months ago
JSON representation
Accessible react accordion component
- Host: GitHub
- URL: https://github.com/daviferreira/react-sanfona
- Owner: daviferreira
- License: mit
- Created: 2015-06-01T21:06:51.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T17:23:43.000Z (about 2 years ago)
- Last Synced: 2024-10-23T08:34:38.131Z (3 months ago)
- Topics: accessibility, accordion, collapsible, react
- Language: JavaScript
- Homepage: https://daviferreira.github.io/react-sanfona
- Size: 5.01 MB
- Stars: 242
- Watchers: 5
- Forks: 64
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-sanfona
[](https://nodei.co/npm/react-sanfona.png?downloads=true)
[](https://travis-ci.org/daviferreira/react-sanfona)
[](https://depfu.com/github/daviferreira/react-sanfona)
React accordion component
## Usage
Install via NPM:
```
npm install react-sanfona
```
Then:
```javascript
import { Accordion, AccordionItem } from 'react-sanfona';
…
render() {
return (
{[1, 2, 3, 4, 5].map(item => {
return (
{`Item ${item} content`}
);
})}
);
}
…
```
## 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
```