React useInfiniteScroll-Hook

React Hook to call an action if an intersected element was reached

Prerequisites

• Node
• pnpm

Install

pnpm install react-use-infinite-scroll-hook

# Or the latest tarball from this repository
pnpm install https://github.com/tscharke/react-use-infinite-scroll-hook/releases/download/v1.0.0/react-use-infinite-scroll-hook-1.0.0.tar.gz

Usage

import { useInfiniteScroll } from 'react-use-infinite-scroll-hook';

const fetchMoreData = async () => {
	const response = await fetch('https://dummyjson.com/products')

	return await response.json()
}

export const MyComponent = ({ data }) => {
	const scrollElementRef = useInfiniteScroll<HTMLSpanElement>(fetchMoreData)

	return (
		<section>
			{
				data.map(({ id, title }) => (
					<div key={id}>${title}</div>
				))
			}
			<span ref={scrollElementRef} style={{ visibility: 'hidden', width: 0, height: 0 }} />
		</section>
	)
}

💻 Setup (on your machine)

# Check out the main-branch of this repository and switch into this directory
git clone [email protected]:tscharke/react-use-infinite-scroll-hook.git && cd "$(basename "$_" .git)"

# Install all dependencies
pnpm install

# Build module
pnpm run build

# Optional
# Run tests
pnpm run test

# Run linter
pnpm run lint

❤️🙏 Love & Thanks

Many thanks to Denise Schaefer for here useIntersection-Hook, on which this React Hook based.