React expandable components, assist you render expandable objects or React components
MIT License
React expandable listview Rend components or plain object in an expandable way!
You don't need jQuery to do this...
$ npm install --save react-expandable-listview
http://cht8687.github.io/react-expandable-listview/example/
https://github.com/cht8687/react-expandable-listview/tree/master/src/example
<ReactExpandableListView
data={data}
headerAttName="headerName"
itemsAttName="items"
/>
The component accepts three props.
data
: PropTypes.array.isRequiredisReactComponent
is used to select if you want to render a react object or not.const DATALIST = [
{
headerName : "ListG",
isOpened: true,
isReactComponent: false,
items : [{
title : "items1"
}, {
title : "items2"
}, {
title : "items3"
},{
title : "items4"
},{
title : "items5"
},{
title : "items6"
}],
height: 100
},{
headerName : "ListH",
isOpened: true,
isReactComponent: false,
items : [{
title : "items1"
}, {
title : "items2"
}, {
title : "items3"
}],
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>
);
}
}
Note height
varible defines the height you want each list to be like.
You can set different height data to suit the content of each section.
headerAttName
: PropTypes.string.isRequiredVariable name of 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 https://github.com/cht8687/react-expandable-listview.git
$ cd react-expandable-listview
$ npm install
$ webpack-dev-server
Then
open http://localhost:8080/webpack-dev-server/
MIT