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