You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
importReactfrom'react';importReactDOMfrom'react-dom';importInfiniteGridfrom'../src/grid';classExampleItemextendsReact.Component{staticgetpropTypes(){return{index: React.PropTypes.number};}render(){return(<divclassName='example'>
This is {this.props.index}</div>);}}// Create 100,000 Example itemsletitems=[];for(leti=0;i<=100000;i++){items.push(<ExampleItemindex={i}/>);}ReactDOM.render(<InfiniteGriditemClassName={"item"}entries={items}/>,document.getElementById('grid'));
Required props
entriesReact.PropTypes.arrayOf(React.PropTypes.element) - The only required property is an array of React elements that you want to render.
Optional props
heightReact.PropTypes.number - The height of the grid item
widthReact.PropTypes.number - The width of the grid item
paddingReact.PropTypes.number - The padding around your items
wrapperHeightReact.PropTypes.number - The height of the grid.
lazyCallbackReact.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.