Need help with react-infinite-grid?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ggordan
200 Stars 43 Forks MIT License 48 Commits 10 Opened issues

Description

A React component which renders a grid of elements.

Services available

!
?

Need anything else?

Contributors list

# 253,953
HTML
C#
bluetoo...
normali...
34 commits
# 522,309
JavaScr...
HTML
6 commits
# 494,849
HTML
CSS
4 commits

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(

This is {this.props.index}
); }

}

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

ReactDOM.render(, 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.