Rend components or plain object in an expandable way!
## Philosophy
>You don't need jQuery to do this...
## Installation
### npm
```
$ npm install --save react-expandable-listview
```
## Demo
[http://cht8687.github.io/react-expandable-listview/example/](http://cht8687.github.io/react-expandable-listview/example/)
## Example Code
[https://github.com/cht8687/react-expandable-listview/tree/master/src/example](https://github.com/cht8687/react-expandable-listview/tree/master/src/example)
## API
#### <ReactExpandableListView />
```js
```
The component accepts three props.
#### `data`: PropTypes.array.isRequired
* note that `isReactComponent` is used to select if you want to render a react object or not.
### Render plain object
```js
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
}
];
```
### 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 (
);
}
}
```
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.isRequired
Variable name of 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-expandable-listview/tree/master/react-expandable-listview.css).
## Development
```
$ 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/
```
## License
MIT
[](https://github.com/feross/standard)
