syqs/react-virtualized-chatbox

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

CSS

Add following style rule on Index.html

  .ReactVirtualized__Grid {
        border: 1px solid #000;
    }
  
    .resetOverFlow .ReactVirtualized__Grid__innerScrollContainer{
        overflow: visible !important;
    }

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