https://github.com/chfoidl/react-accordion
A simple react accordion component.
https://github.com/chfoidl/react-accordion
Last synced: 12 months ago
JSON representation
A simple react accordion component.
- Host: GitHub
- URL: https://github.com/chfoidl/react-accordion
- Owner: chfoidl
- License: mit
- Created: 2017-07-16T09:02:26.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-16T09:29:56.000Z (about 9 years ago)
- Last Synced: 2025-05-21T10:49:24.750Z (about 1 year ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Accordion [](https://badge.fury.io/js/%40sethorax%2Freact-accordion)
A simple React accordion component.
## Installation
You can easily install this package via **npm**:
`npm install --save @sethorax/react-accordion`
or **yarn**:
`yarn add @sethorax/react-accordion`
## Example
```js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactAccordion from '@sethorax/react-accordion';
class App extends React.Component {
constructor() {
super();
this.state = {
accordionData: [
{
id: 1,
title: 'Entry 1',
content: '
Fancy html content'
},
{
id: 2,
title: 'Entry 2',
content: 'Fancy html content'
}
]
}
}
render() {
return (
Accordion
);
}
}
ReactDOM.render(, document.getElementById('app'));
```
## Props
Property | Type | Default | Required | Description
:-------------------|:------:|:--------------:|:--------:|:----------------------------------------
data | array | | yes | Array of accordion contents.
multiple | bool | false | no | Allows multiple accordion entries to be open at the same time.
collapsible | bool | true | no | If set to `false` the currently opened accordion entry cannot be closed.
animation | number | 500 | no | Animation speed in milliseconds. If set to `0` animations are disabled completely.
## Licence
[MIT](LICENSE)