🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-infinite-scroll-hook

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-infinite-scroll-hook

A simple hook to create infinite scroll components

6.0.1
latest
Source
npm
Version published
Weekly downloads
80K
-30.12%
Maintainers
1
Weekly downloads
 
Created
Source

react-infinite-scroll-hook

Build status License Version

All Contributors

This is a hook to create infinite scroll components!
Live demo is here.

Basically, we need to set a sentry component to trigger infinite loading. When sentry becomes visible on the screen or it comes near to be visible (based on our config of course), it triggers infinite loading (by calling onLoadMore callback) all with the help of IntersectionObserver.

sentry should be some component which will not be unmounted as long as we want to keep the infinite scrolling observer active. For example, we can use a "loading" indicator as our sentry. The trick is, because that we want to keep the infinite scrolling observer active as long as there is a next page, we need to keep this "loading" component mounted even if we don't have a loading flag as true. This will also keep our layout more consistent and prevent flickering etc.

We don't need to use a "loading" component as the sentry and we can keep them separate too. It can be anything like some empty div or last item of your list etc. We just need to place it based on our scrolling direction. To bottom if we want to trigger loading when we scroll to bottom, to top if we want to trigger it when we scroll to top like a chat message box etc. Same approach can be used with horizontal scrolling too.

Please check below to find examples with different layouts and libraries.

Note: This package uses IntersectionObserver under the hood. You might want to check the browser compatibility from here and if you want to support older browsers, you might need to use a polyfill.

Versions

For React v19, it is recommended to use versions after v6, since it uses cleanup functions for refs.

For older versions of React, you can stick with v5 until you migrate to React 19.

Installation

npm install react-infinite-scroll-hook

Simple Example

import useInfiniteScroll from 'react-infinite-scroll-hook';

function WindowScroll() {
  const { loading, items, hasNextPage, error, loadMore } = useLoadItems();

  const [infiniteRef] = useInfiniteScroll({
    loading,
    hasNextPage,
    onLoadMore: loadMore,
    // When there is an error, we stop infinite loading.
    // It can be reactivated by setting "error" state as undefined.
    disabled: Boolean(error),
    // `rootMargin` is passed to `IntersectionObserver`.
    // We can use it to trigger 'onLoadMore' when the sentry comes near to become
    // visible, instead of becoming fully visible on the screen.
    rootMargin: '0px 0px 400px 0px',
  });

  return (
    <div>
      <List>
        {items.map((item) => (
          <ListItem key={item.key}>{item.value}</ListItem>
        ))}
      </List>
      {hasNextPage && <Loading ref={infiniteRef} />}
    </div>
  );
}

Or if we have a scrollable container and we want to use it as our "list container" instead of document, we just need to use rootRef like:

import useInfiniteScroll from 'react-infinite-scroll-hook';

function VerticalElementScrollPage() {
  const { loading, items, hasNextPage, error, loadMore } = useLoadItems();

  const [infiniteRef, { rootRef }] = useInfiniteScroll({
    loading,
    hasNextPage,
    onLoadMore: loadMore,
    // When there is an error, we stop infinite loading.
    // It can be reactivated by setting "error" state as undefined.
    disabled: Boolean(error),
    // `rootMargin` is passed to `IntersectionObserver`.
    // We can use it to trigger 'onLoadMore' when the sentry comes near to become
    // visible, instead of becoming fully visible on the screen.
    rootMargin: '0px 0px 400px 0px',
  });

  return (
    <Scrollable ref={rootRef}>
      <List>
        {items.map((item) => (
          <ListItem key={item.key}>{item.value}</ListItem>
        ))}
      </List>
      {hasNextPage && <Loading ref={infiniteRef} />}
    </Scrollable>
  );
}

Other Examples

You can find different layout examples here. Live demo contains all of these cases.

Also, we have more realistic examples with SWR and TanStack Query too.

Arguments

NameDescriptionTypeOptionalDefault Value
loadingSome sort of "is fetching" info of the request.boolean
hasNextPageIf the list has more items to load.boolean
onLoadMoreThe callback function to execute when the 'onLoadMore' is triggered.VoidFunction
rootMarginWe pass this to 'IntersectionObserver'. We can use it to configure when to trigger 'onLoadMore'.string
disabledFlag to stop infinite scrolling. Can be used in case of an error etc too.boolean
delayInMsHow long it should wait before triggering 'onLoadMore' (in milliseconds).number100

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Eugene Fidelin

💻

Evan Cater

📖

Romain

💡

This project follows the all-contributors specification. Contributions of any kind welcome!

Keywords

react

FAQs

Package last updated on 18 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts