React Virtualized CHATBOX

A React component that provides you with an infinite scrolling ChatBox, render million of items efficiently inspired by concept of virtualization.

Install

$ npm install react-virtualized-chatbox --save

Usage

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}
        />
    )
  }

Prop Types

| 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 |

Development

Should you wish to develop this module further start by cloning this repository

Run Dev - Run hot reloading node server

$ npm start

Run Prod - Build, deploy, minify npm module

$ npm run build

Acknowledgments

This library draws inspiration from react-virtualized I highly encourage you to check out react-virtualized instead, it's a fantastic library ❤️