use-fetch-infinite-scroll

use-fetch-infinite-scroll

A React hook for infinite scrolling with data fetching from a REST API endpoint.

Installation

You can install the package via npm or yarn:

npm install use-fetch-infinite-scroll

yarn add use-fetch-infinite-scroll

Example

import React from 'react';
import useFetchInfiniteScroll from 'use-fetch-infinite-scroll';

const InfiniteScrollComponent = () => {
	const { data, loading, hasMore, lastItemRef } = useFetchInfiniteScroll({
		endpoint: '/api/items',
		limit: 10,
		sortOrder: 'asc',
		filters: { category: 'books' }
	});
	
	return (
		<div>
			{data.map((item, index) => (
				<div key={item._id} ref={index === data.length - 1 ? lastItemRef : null}>
					{item.name}
				</div>
			))}
			{loading && <p>Loading...</p>}
			{!hasMore && <p>No more items</p>}
		</div>
	);
};

export default InfiniteScrollComponent;

Props

• endpoint - The API endpoint to fetch data from.
• limit - The number of items to retrieve per request.
• **sortOrder ** - The order to sort the items (asc for ascending, desc for descending)
• **filters ** - An object containing key-value pairs to filter the items.
• idKey - The key to use as the unique identifier for each item.
• dataKey - The key to use to access the array of items in the response data.
• fetchOptions - Additional options to pass to the fetch function.

License

This project is licensed under the MIT License.

Development

To start development, use the following command:

yarn dev

This will start both the client and server development environments. The stories for development can be found in the stories directory.

Scripts

• dev: Concurrently runs the client and server development environments.
• client-dev: Starts the Vite development server.
• server-dev: Starts the server using nodemon.
• build: Builds the project using TypeScript and Vite.
• preview: Previews the built project using Vite.