Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ggordan/react-infinite-grid
A React component which renders a grid of elements.
https://github.com/ggordan/react-infinite-grid
Last synced: about 2 months ago
JSON representation
A React component which renders a grid of elements.
- Host: GitHub
- URL: https://github.com/ggordan/react-infinite-grid
- Owner: ggordan
- License: mit
- Created: 2015-01-19T09:51:07.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2020-07-15T19:42:42.000Z (over 4 years ago)
- Last Synced: 2024-09-20T00:50:55.803Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 837 KB
- Stars: 203
- Watchers: 11
- Forks: 39
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-infinite-grid - A React component which renders a grid of elements. (Uncategorized / Uncategorized)
- awesome-react-components - react-infinite-grid - A React component which renders a grid of elements. (Performance / UI)
- awesome-react-components - react-infinite-grid - A React component which renders a grid of elements. (Performance / UI)
- awesome-react-components - react-infinite-grid - A React component which renders a grid of elements. (Performance / UI)
- awesome-react-components - react-infinite-grid - A React component which renders a grid of elements. (Performance / UI)
- fucking-awesome-react-components - react-infinite-grid - A React component which renders a grid of elements. (Performance / UI)
- awesome-list - react-infinite-grid - A React component which renders a grid of elements. (Performance / UI)
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.
```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(
This is {this.props.index}
);
}}
// Create 100,000 Example items
let items = [];
for (let i = 0; i <= 100000; i++) {
items.push();
}ReactDOM.render(, 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](http://ggordan.com/post/react-infinite-grid.html).