An React grid component which can handle rendering large amounts of data.
npm install 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.
``
npm install react-infinite-grid
The example below renders a grid with 100,000 items.
`jsx
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(
}
// Create 100,000 Example items
let items = [];
for (let i = 0; i <= 100000; i++) {
items.push(
}
ReactDOM.render(
`
- entries React.PropTypes.arrayOf(React.PropTypes.element) - The only required property is an array of React elements that you want to render.
- height React.PropTypes.number - The height of the grid itemReact.PropTypes.number
- width - The width of the grid itemReact.PropTypes.number
- padding - The padding around your itemsReact.PropTypes.number
- wrapperHeight - The height of the grid.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.
- lazyCallback
You can find a demo here.