# React Accordion [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/cht8687/help)

React implementation of Accordion.

![React Accordion](src/example/react-accordion.gif) ## 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 git@github.com:cht8687/react-accordion.git $ cd react-accordion $ npm install $ webpack-dev-server ``` Then ``` open http://localhost:8080/webpack-dev-server/ ``` ## License MIT

	Stars	Issues	Version	Updated	Created
react-accordion-component			1.0.10	9 years ago	9 years ago
react-accordion-components			1.0.3	8 years ago	8 years ago
react-collapsible	544	31	2.10.0	2 years ago	9 years ago
react-light-accordion			0.1.4	6 years ago	6 years ago

react-accordion-component vs react-accordion-components vs react-collapsible vs react-light-accordion

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past