React-virtualgrid NPM

Infinite scrolling grid which uses promises to asynchronously load the grid. Loads only what is necessary to keep memory usage low.

For live demo look at https://kavithalk.github.io/

Installation

npm install
npm start
open http://localhost:3000

###Example

 import React, { Component } from 'react';
 import VirtualGrid from './component/VirtualGrid';

 export default class AppVirtualGrid extends React.Component {

constructor(props) { super(props); }

   render() {
		return (
        	<VirtualGrid  getPromise={this.getPromise.bind(this)} width="1000" height="800" itemHeight={200} itemWidth={200}></VirtualGrid>
		);

}

getPromise(index){ if (index < 0) { return Promise.resolve(null); } return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(<div style={{height: 190 + 'px', backgroundColor: '#7DCEA0', width:190 + 'px' , display:'table-cell', verticalAlign:'middle'}}><h2 style={{color: '#555', textAlign : 'center' }}>{index}); }, Math.random()*(10000)+1000); }); } }