https://github.com/tasin5541/react-infinite-observer
A library that offers a simple hook to implement infinite scroll in react component, with full control over the behavior. Implemented with IntersectionObserver.
https://github.com/tasin5541/react-infinite-observer
react react-infinite react-infinite-scroll react-infinite-scroll-hook react-infinite-scroll-observer react-library reactjs
Last synced: about 1 month ago
JSON representation
A library that offers a simple hook to implement infinite scroll in react component, with full control over the behavior. Implemented with IntersectionObserver.
- Host: GitHub
- URL: https://github.com/tasin5541/react-infinite-observer
- Owner: Tasin5541
- License: mit
- Created: 2023-11-12T09:50:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-28T23:18:17.000Z (about 2 months ago)
- Last Synced: 2025-04-12T04:59:53.032Z (about 1 month ago)
- Topics: react, react-infinite, react-infinite-scroll, react-infinite-scroll-hook, react-infinite-scroll-observer, react-library, reactjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-infinite-observer
- Size: 2.16 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-infinite-observer
[![Version Badge][npm-version-svg]][package-url]
[![GZipped size][npm-minzip-svg]][bundlephobia-url]
[![Test][test-image]][test-url]
[![License][license-image]][license-url]
Check live [StoryBook demo](https://tasin5541.github.io/react-infinite-observer/)
## Overview
React Infinite Observer is a lightweight React hook for handling infinite scrolling in your web applications. It enables you to efficiently load and display large sets of data by triggering requests as the user scrolls down/up the page.
## Features
- **Infinite Scrolling:** Load more data automatically as the user scrolls down/up the page.
- **Easy Integration:** Simple integration into your existing React components.
- **Flexibility:** Customize the trigger point for fetching more data and loading indicator appearance.
- **Full Manual Control:** The hook provides option to autofetch data without scolling until height of list > screen height
## Getting Started
### Installation
```bash
npm install react-infinite-observer
```
or
```bash
yarn add react-infinite-observer
```
## Usage
Static Ref
```tsx
import { FC, useState, useCallback, useEffect } from 'react';
import { useInfiniteObserver } from 'react-infinite-observer';
export const App: FC = () => {
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [page, setPage] = useState(1);
const onIntersection = useCallback(() => {
setPage((pageNo) => pageNo + 1);
}, []);
const [setRefElement] = useInfiniteObserver(onIntersection);
const fetchData = async () => {
// Fetch more data and update state
setIsLoading(true);
// ... fetch data logic
setIsLoading(false);
};
useEffect(() => {
fetchData();
}, [page]);
return (
{items.map((item) => (
-
{item.name.last}
))}
{isLoading && Loading...
}
);
};
```
Dynamic Ref (keep fetching data until screen is filled)
```tsx
import { FC, useState, useCallback, useEffect } from 'react';
import { useInfiniteObserver } from 'react-infinite-observer';
export const App: FC = () => {
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [page, setPage] = useState(1);
const onIntersection = useCallback(() => {
setPage((pageNo) => pageNo + 1);
}, []);
const [setRefElement] = useInfiniteObserver(onIntersection);
const fetchData = async () => {
// Fetch more data and update state
setIsLoading(true);
// ... fetch data logic
setIsLoading(false);
};
useEffect(() => {
fetchData();
}, [page]);
return (
{items.map((item, index) => (
-
{item.name.last}
))}
{isLoading && Loading...
}
);
};
```
## API
### infiniteObserverOptions
Provide these as the options argument in the `useInfiniteObserver` hook.
| Name | Type | Default | Description |
| ------------------ | ------------ | ----------- | ---------------------------------------------------------------------------------------------- |
| **threshold** | `number` | `1` | Number between `0` and `1` indicating the percentage that should be visible before triggering. |
| **onIntersection** | `() => void` | `undefined` | Call this function whenever the Ref Element is in view for the first time. |
## Example
Check out the [stackblitz snippet](https://stackblitz.com/edit/stackblitz-starters-plpsiy?file=src%2FApp.tsx) for a simple implementation.
## License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/Tasin5541/react-infinite-observer/blob/main/LICENSE) file for details.
[package-url]: https://www.npmjs.com/package/react-infinite-observer
[npm-version-svg]: https://img.shields.io/npm/v/react-infinite-observer.svg
[npm-minzip-svg]: https://img.shields.io/bundlephobia/minzip/react-infinite-observer.svg
[bundlephobia-url]: https://bundlephobia.com/result?p=react-infinite-observer
[license-image]: https://img.shields.io/npm/l/react-infinite-observer.svg
[license-url]: LICENSE
[test-image]: https://github.com/Tasin5541/react-infinite-observer/actions/workflows/test.yml/badge.svg?branch=main
[test-url]: https://github.com/Tasin5541/react-infinite-observer/actions?query=workflow%3ATest