Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cht8687/react-accordion
React accordion component --- Convert a pair of headers and content panels into an accordion using React, React-motion
https://github.com/cht8687/react-accordion
accordion react react-component
Last synced: about 1 month ago
JSON representation
React accordion component --- Convert a pair of headers and content panels into an accordion using React, React-motion
- Host: GitHub
- URL: https://github.com/cht8687/react-accordion
- Owner: cht8687
- License: mit
- Created: 2015-11-28T03:41:57.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-12T06:50:49.000Z (about 8 years ago)
- Last Synced: 2024-10-09T14:05:04.035Z (about 1 month ago)
- Topics: accordion, react, react-component
- Language: JavaScript
- Homepage:
- Size: 766 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Accordion
[](https://gitter.im/cht8687/help)
React implementation of Accordion.
## Philosophy
>You don't need jQuery to do this...
## Installation
### npm
```
$ npm install --save react-accordion-components
```
## Demo
[http://cht8687.github.io/react-accordion/example/](http://cht8687.github.io/react-accordion/example/)
## API
```js
```
The component accepts three props.
#### `data`: PropTypes.array.isRequired
### Render plain object
```js
const DATA = [
{
headerName : "Section 1",
isOpened: true,
isReactComponent: false,
items : [{
paragraph : "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."
}],
height: 100
}, {
headerName : "Section 2",
isOpened: false,
isReactComponent: false,
items : [{
paragraph : "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."
}],
height: 100
},{
headerName : "Section 3",
isOpened: false,
isReactComponent: false,
items : [{
paragraph : "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."
}],
height: 100
},{
headerName : "Section 4",
isOpened: false,
isReactComponent: false,
items : [{
paragraph : "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."
}],
height: 100
},
];
```
### Render react component
If you want to render a react component, for example, a menu object, you can set `isReactComponent` to `true`:
```js
export default class Menu extends React.Component {
static get menuItems() {
return [
{
headerName: 'Products',
isOpened: false,
height: 100,
isReactComponent: true,
items: [
(
All
),
(
Expired
),
(
Submitted
),
],
},
{
headerName: 'Promotions',
isOpened: false,
height: 100,
isReactComponent: true,
items: [
(
Active
),
],
},
{
headerName: 'Settings',
isOpened: false,
height: 100,
isReactComponent: true,
items: [
(
Al
),
],
},
];
}
render() {
return (
);
}
}
```
`height` controls how much height that certain cell will be look like.
This helps you when you have different contents length.
#### `options`: PropTypes.object.isRequired
`autoClapse` indicate if close other section when new section being clicked.
```js
const OPTIONS = {
autoClapse: true,
}
```
#### `headerAttName`: PropTypes.string.isRequired
variable name of section header in your `data` object.
In above example, it's `headerName`.
#### `itemsAttName`: PropTypes.string.isRequired
variable name which hold items data in your `data` object.
In above example, it's `items`.
## Styling
The CSS is flexible, commented and made to be easily customized.
There is an CSS file in the root level you can include it in your project.
[CSS code](https://github.com/cht8687/react-accordion/tree/master/react-accordion.css).
## Development
```
$ git clone [email protected]:cht8687/react-accordion.git
$ cd react-accordion
$ npm install
$ webpack-dev-server
```
Then
```
open http://localhost:8080/webpack-dev-server/
```
## License
MIT
