v5.0.1

Fixed peerDependencies by adding react-dom.

v5.0.0

• Migrated to monorepo structure by using Turborepo
• Bundling with tsup
• Better ESM/CJS support by checking publint and Are the Types Wrong

v4.1.1

Bumped react-intersection-observer-hook version

v4.1.0

Bumped react-intersection-observer-hook version

v4.0.4

Dependency updates

v4.0.3

Migrated to latest react-intersection-observer-hook for React 18 compatibility

v4.0.2

Exported UseInfiniteScrollHookRefCallback and UseInfiniteScrollHookRootRefCallback for better typing experience.

v4.0.1

Updated README.md with some more explanation about how to use the hook with more control and mentioned examples which are using swr and Apollo GraphQL.
Published this version to keep README.md updated on npm too.

v4.0.0

With this verion, we completely migrate to using IntersectionObserver instead of checking the DOM by using setInterval.

So, we have a much more flexible API and it's much easier to create lists with different layouts.

You can check README.md to a little bit more detailed explanation, different examples and demo.

But simply, we can show the difference like this:

Before v4

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

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

  const infiniteRef = useInfiniteScroll({
    loading,
    hasNextPage,
    onLoadMore: handleLoadMore,
    scrollContainer,
  });

  // ...

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

After v4

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

function SimpleInfiniteList() {
  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: !!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 (
    <List>
      {items.map((item) => (
        <ListItem key={item.key}>{item.value}</ListItem>
      ))}
      {/* 
          As long as we have a "next page", we show "Loading" right under the list.
          When it becomes visible on the screen, or it comes near, it triggers 'onLoadMore'.
          This is our "sentry".
          We can also use another "sentry" which is separated from the "Loading" component like:
            <div ref={infiniteRef} />
            {loading && <ListItem>Loading...</ListItem>}
          and leave "Loading" without this ref.
      */}
      {hasNextPage && (
        <ListItem ref={infiniteRef}>
          <Loading />
        </ListItem>
      )}
    </List>
  );
}

3.0.0

Migrated to TSDX

• Change named export to default export

// Before
import { useInfiniteScroll } from "react-infinite-scroll-hook";
// After
import useInfiniteScroll from "react-infinite-scroll-hook";