react-virtualized-chatbox

0.0.4 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-virtualized-chatbox

Weekly Downloads

0

Version

0.0.4

License

MIT

Last publish

Collaborators

  • raodurgesh