Popularity
3.3
Declining
Activity
0.0
Stable
202
10
44
Programming language: JavaScript
License: MIT License
react-infinite-grid alternatives and similar libraries
Based on the "Infinite Scroll" category.
Alternatively, view react-infinite-grid alternatives based on common mentions on social networks and blogs.
-
react-virtualized
React components for efficiently rendering large lists and tabular data -
react-window
React components for efficiently rendering large lists and tabular data -
react-lazyload
Lazy load your component, image or anything matters the performance. -
react-infinite
A browser-ready efficient scrolling container based on UITableView. -
react-list
:scroll: A versatile infinite scroll React component. -
react-infinity
A UITableView Inspired list and grid display solution with element culling and smooth animations -
af-virtual-scroll
React components for rendering large scrollable data -
react-recycled-scrolling
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks
Appwrite - The Open Source Firebase alternative introduces iOS support
Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
Promo
appwrite.io
Do you think we are missing an alternative of react-infinite-grid or a related project?
README
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.