Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mdubourg001/react-infinite-list
A React handy component to render infinite, onScroll fetched, data lists.
https://github.com/mdubourg001/react-infinite-list
data-fetching react reactjs
Last synced: 11 days ago
JSON representation
A React handy component to render infinite, onScroll fetched, data lists.
- Host: GitHub
- URL: https://github.com/mdubourg001/react-infinite-list
- Owner: mdubourg001
- License: mit
- Created: 2019-02-24T23:51:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T13:42:34.000Z (almost 2 years ago)
- Last Synced: 2024-10-13T18:09:24.351Z (25 days ago)
- Topics: data-fetching, react, reactjs
- Language: JavaScript
- Size: 1.7 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-infinite-list
A handy React component to render infinite, onScroll fetched, data lists.
Demo: https://react-infinite-list.netlify.com
---
### Install
```sh
$ npm install @damnhotuser/react-infinite-list
```
---
### Usage
`react-infinite-list` provides a single component, `InfiniteList`.
```jsx
import React, { useState } from "react";
import InfiniteList from "@damnhotuser/react-infinite-list";
import mock_fetch from "./mock_data"; // mocking an API service
const App = props => {
const [rows, setRows] = useState([]);
const fetchData = (offset, limit) =>
mock_fetch(offset, limit).then(data => {
setRows([...rows, ...data]);
});
return (
/*
* InfiniteList takes three needed arguments:
* `rows` are data to display in the list
* `fetchData` is called on rendering and when needed, on scroll
* `limit` is the number of rows to fetch on each `fetchData` call
*
* InfiniteList's `children` must be a function, and has the row to render passed as an argument
*
* current `index` and `ref` will also be passed as arguments of your `children` function, it is IMPORTANT to pass ref to the rendered list element for the onScroll fetch to work
*/
{(row, index, ref) => (
{row.name}
)}
);
};
```
**⚠️ InfiniteList's `children` must be a function. The current row to render will be passed as an argument.**
**⚠️ current `index` and `ref` will also be passed as arguments of your `children` function, it is IMPORTANT to pass ref to the rendered list element for the onScroll fetch to work**
`InfiniteList` takes also 3 optionnal arguments:
- `containerClasses` are classes that will be passed as an argument to the `div` holding your list.
- `containerStyle` are style rules that will be passed as an argument to the `div` holding your list.
- `fetchThreshold` (number) is the number of element before the end of the displayed list to wait before calling `fetchData` again. i.e. if n elements are displayed on the list, and `fetchThreshold` is set to 3,`fetchData` will be called when the n-3th element of the list is scrolled into view. **The default value of `fetchthreshold` is 5**.