React accordion component --- Convert a pair of headers and content panels into an accordion using React, React-motion
MIT License
React implementation of Accordion.
You don't need jQuery to do this...
$ npm install --save react-accordion-components
http://cht8687.github.io/react-accordion/example/
<ReactAccordion
data={data}
options={options}
headerAttName="headerName"
itemsAttName="items"
/>
The component accepts three props.
data
: PropTypes.array.isRequiredconst 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
},
];
If you want to render a react component, for example, a menu object, you can set isReactComponent
to true
:
export default class Menu extends React.Component {
static get menuItems() {
return [
{
headerName: 'Products',
isOpened: false,
height: 100,
isReactComponent: true,
items: [
(
<Link
to="admin/products/all"
className="btn btn-default"
activeClassName="active"
>
All
</Link>
),
(
<Link
to="admin/products/expired"
className="btn btn-default"
activeClassName="active"
>
Expired
</Link>
),
(
<Link
to="admin/products/submitted"
className="btn btn-default"
activeClassName="active"
>
Submitted
</Link>
),
],
},
{
headerName: 'Promotions',
isOpened: false,
height: 100,
isReactComponent: true,
items: [
(
<Link
to="admin/promotions/active"
className="btn btn-default"
activeClassName="active"
>
Active
</Link>
),
],
},
{
headerName: 'Settings',
isOpened: false,
height: 100,
isReactComponent: true,
items: [
(
<Link
to="admin/settings/all"
className="btn btn-default"
activeClassName="active"
>
Al
</Link>
),
],
},
];
}
render() {
return (
<div id="admin-menu">
<ReactExpandableListView
data={this.constructor.menuItems}
headerAttName="headerName"
itemsAttName="items"
/>
</div>
);
}
}
height
controls how much height that certain cell will be look like.
This helps you when you have different contents length.
options
: PropTypes.object.isRequiredautoClapse
indicate if close other section when new section being clicked.
const OPTIONS = {
autoClapse: true,
}
headerAttName
: PropTypes.string.isRequiredvariable name of section header in your data
object.
In above example, it's headerName
.
itemsAttName
: PropTypes.string.isRequiredvariable name which hold items data in your data
object.
In above example, it's items
.
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.
$ git clone [email protected]:cht8687/react-accordion.git
$ cd react-accordion
$ npm install
$ webpack-dev-server
Then
open http://localhost:8080/webpack-dev-server/
MIT