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";

2.0.2

• Fix onLoadMore is triggered even when list is not visible: #11 (by @eugef )

2.0.0

• Changed loadMore prop as onLoadMore to provide some naming standardization. Due to this will break the apps those are currently using this package, this is a major version update.

1.0.2

• Fixed window.resize bug.