React Hook to call an action if an intersected element was reached
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.1/react-use-infinite-scroll-hook-1.0.1.tar.gz
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>
)
}
# 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
Many thanks to Denise Schaefer for here useIntersection-Hook, on which this React Hook based.