A React component that provides you with an infinite scrolling ChatBox, render million of items efficiently inspired by concept of virtualization.
$ npm install react-virtualized-chatbox --save
import ChatBox from 'react-virtualized-chatbox';
...
_loadMoreRows() {
// @TODO Perform asychronous load of data
}
_rowRenderer(row){
return (
<div>
Row {row.key + 1}
</div>
);
}
// Optional function to return dynamic row height
_rowHeight({ index }){
return index < this.state.data.length ? this.state.data[index].height : 40;
}
// Optional function to return reference of virtualized list component
_getListComponent(ref){
this.listComponent = ref;
}
render() {
return (
<ChatBox
list={this.state.list}
height={500}
rowHeight={this._rowHeight}
rowRenderer={this._rowRenderer}
loadMoreRows={this._loadMoreRows}
getListComponent={this._getListComponent}
/>
)
}
Property | Type | Required? | Description |
---|---|---|---|
loadMoreRows | Function | ✓ | Callback used for loading more data |
rowRenderer | Function | ✓ | Used to render each row |
rowHeight | Number or Function | ✓ | Either a fixed row height (number) or a function that returns the height of a row given its index: ({ index: number }): number |
threshold | Number | How many pixel before the bottom to request more data (default: 50) | |
list | Array | Data array | |
height | Number | ✓ | Force a height on the entire list component. |
getListComponent | Function | Callback used to give back reference to underlying virtualized list component for finer control |
Add following style rule on Index.html
.ReactVirtualized__Grid {
border: 1px solid #000;
}
.resetOverFlow .ReactVirtualized__Grid__innerScrollContainer{
overflow: visible !important;
}
Should you wish to develop this module further start by cloning this repository
$ npm start
$ npm run build
This library draws inspiration from react-virtualized I highly encourage you to check out react-virtualized instead, it's a fantastic library ❤️