React expandable listview

React expandable listview

Installation

npm

$ npm install --save react-expandable-listview

Demo

http://cht8687.github.io/react-expandable-listview/example/

Example Code

https://github.com/cht8687/react-expandable-listview/tree/master/src/example

API

<ReactExpandableListView />

<ReactExpandableListView 
        data={data} 
        headerAttName="headerName"
        itemsAttName="items" 
      />

The component accepts three props.

data: PropTypes.array.isRequired

const DATALIST = [
{
    headerName : "ListG",
    isOpened: true,
    items : [{
      title : "items1"
    }, {
      title : "items2"
    }, {
      title : "items3"
    },{
      title : "items4"
    },{
      title : "items5"
    },{
      title : "items6"
    }],
    height: 100
  },{
    headerName : "ListH",
    isOpened: true,
    items : [{
      title : "items1"
    }, {
      title : "items2"
    }, {
      title : "items3"
    }],
    height: 100
  }
];

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.

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