Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-infinite-grid with all npm packages installed. Try it out:

var reactInfiniteGrid = require("react-infinite-grid")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-infinite-grid v0.4.0

An React grid component which can handle rendering large amounts of data.

react-infinite-grid

react infinite grid is a React component which renders a grid of React elements. It's different because it only renders the elements that the user can see (and a small buffer) meaning that it is well suited for displaying a large number of elements.

Installation

npm install react-infinite-grid

Example

The example below renders a grid with 100,000 items.

import React from 'react';
import ReactDOM from 'react-dom';
import InfiniteGrid from '../src/grid';

class ExampleItem extends React.Component {

  static get propTypes() {
    return {
      index: React.PropTypes.number
    };
  }

  render() {
    return(
      <div className='example'>
        This is {this.props.index}
      </div>
    );
  }

}

// Create 100,000 Example items
let items = [];
for (let i = 0; i <= 100000; i++) {
  items.push(<ExampleItem index={i} />);
}

ReactDOM.render(<InfiniteGrid itemClassName={"item"} entries={items} />, document.getElementById('grid'));

Required props

  • entries React.PropTypes.arrayOf(React.PropTypes.element) - The only required property is an array of React elements that you want to render.

Optional props

  • height React.PropTypes.number - The height of the grid item
  • width React.PropTypes.number - The width of the grid item
  • padding React.PropTypes.number - The padding around your items
  • wrapperHeight React.PropTypes.number - The height of the grid.
  • lazyCallback React.PropTypes.func - A function that takes no arguments which is called when a user reaches the end of the grid. Useful if you want to lazy load your data.

Demo

You can find a demo here.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free