Popularity
3.3
Stable
Activity
0.0
Stable
204
11
43
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. -
#<Sawyer::Resource:0x00007f0920b5de40>
The most powerful virtual list component for React -
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 backend cloud platform
The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file 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.