Popularity
3.3
Stable
Activity
0.0
Stable
203
11
41
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
Simple open-source tools that just work (usually fast) -
react-recycled-scrolling
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.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.