Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cht8687/react-expandable-listview
React expandable components, assist you render expandable objects or React components
https://github.com/cht8687/react-expandable-listview
css listview react react-components
Last synced: 20 days ago
JSON representation
React expandable components, assist you render expandable objects or React components
- Host: GitHub
- URL: https://github.com/cht8687/react-expandable-listview
- Owner: cht8687
- License: mit
- Created: 2015-11-14T11:47:22.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-27T03:22:36.000Z (about 7 years ago)
- Last Synced: 2024-10-26T13:01:06.617Z (21 days ago)
- Topics: css, listview, react, react-components
- Language: JavaScript
- Homepage:
- Size: 623 KB
- Stars: 37
- Watchers: 7
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React expandable listview
[](https://gitter.im/cht8687/help)
React expandable listview
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)
