https://github.com/muriukialex/react-infinite-scroll
A package to add infinite scroll functionality to your react application
https://github.com/muriukialex/react-infinite-scroll
react react-hooks react-infinite-scroll
Last synced: 4 months ago
JSON representation
A package to add infinite scroll functionality to your react application
- Host: GitHub
- URL: https://github.com/muriukialex/react-infinite-scroll
- Owner: muriukialex
- License: mit
- Created: 2023-11-04T08:06:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-12T05:19:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T03:18:04.558Z (over 1 year ago)
- Topics: react, react-hooks, react-infinite-scroll
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@muriukialex/react-infinite-scroll
- Size: 374 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @muriukialex/react-infinite-scroll
A custom React hook for implementing infinite scroll functionality with ease. This hook simplifies the process of setting up an Intersection Observer for infinite scrolling in your React application.
## Installation
To use this hook in your React project, follow these steps:
1. Install it using npm or yarn:
```bash
npm install @muriukialex/react-infinite-scroll
# or
yarn add @muriukialex/react-infinite-scroll
```
2. Import and use the `useInfiniteScroll` hook in your React component.
```javascript
import useInfiniteScroll from '@muriukialex/react-infinite-scroll';
// ... (your component code)
```
## Usage
Here's how to use the `useInfiniteScroll` hook in your React component:
```javascript
import { useState, useRef } from 'react';
import useInfiniteScroll from '@muriukialex/react-infinite-scroll';
// ... (your other imports)
const defaultParams = {
_start: 0,
_limit: 10,
};
export default function App() {
const [params, updateParams] = useState(defaultParams);
const { isLoading, items } = usePosts({ params });
const targetRef = useRef(null);
const onLoadMore = () => {
if (params._start > 95) {
return;
}
updateParams(prev => ({
_start: prev._start + 10,
_limit: prev._limit,
}));
};
const [isVisible] = useInfiniteScroll({ targetRef, onLoadMore });
if (isLoading && items.length === 0) return
Is loading
;
return (
{isVisible ? (
✅ Element Visible
) : (
❌ Element Not Visible
)}
Infinite Scroll Example
{isLoading && Is loading...}
{params._start < 95 ? : Reached end
}
);
}
```
## API
### `useInfiniteScroll(options: useInfiniteScrollProps): boolean`
- `options`: An object containing the following properties:
- `targetRef` (required): A React ref to the target element that triggers the infinite scroll when it becomes visible in the viewport.
- `onLoadMore` (required): A callback function to execute when the target element becomes visible, indicating the need to load more content.
- `options` (optional): An object containing configuration options for the Intersection Observer. The default values are used if not provided.
- Returns a boolean value, `isVisible`, which indicates whether the target element is currently visible in the viewport.
## License
This project is licensed under the ISC License.
## Author
[muriukialex](https://github.com/muriukialex)