# better-react-infinite-scroll

> Infinite scroll component for react.

Latest version **0.2.0** (published 2024-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install better-react-infinite-scroll
pnpm add better-react-infinite-scroll
yarn add better-react-infinite-scroll
bun add better-react-infinite-scroll
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2024-08-16 |
| First published | 2023-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 17.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51 |
| Maintainers | apestein |
| Keywords | infinite, scroll, react |

## Links

- npm: https://www.npmjs.com/package/better-react-infinite-scroll
- Repository: https://github.com/Apestein/better-react-infinite-scroll
- Homepage: https://github.com/Apestein/better-react-infinite-scroll#readme
- Issues: https://github.com/Apestein/better-react-infinite-scroll/issues
- npm.io page: https://npm.io/package/better-react-infinite-scroll

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2024-08-16
- 0.1.10 — 2024-08-16
- 0.1.9 — 2024-01-07
- 0.1.8 — 2023-12-17
- 0.1.7 — 2023-09-18
- 0.1.6 — 2023-08-23
- 0.1.4 — 2023-06-09
- 0.1.3 — 2023-06-09
- 0.1.2 — 2023-06-09
- 0.1.1 — 2023-06-09
- 0.1.0 — 2023-06-09
- 0.0.9 — 2023-06-09
- 0.0.8 — 2023-06-08
- 0.0.7 — 2023-06-07
- 0.0.6 — 2023-06-07
- … 4 more at https://npm.io/package/better-react-infinite-scroll/versions

## README

A react infinite scroll component made with modern Intersection Observer API, meaning it will be much more performant. Small and easy to customize, written with typescript as a functional component.

I made this component because I found other solutions such as [react-finite-scroll-component](https://www.npmjs.com/package/react-infinite-scroll-component) and [react-infinite-scroller](https://www.npmjs.com/package/react-infinite-scroller) was large, written as class component, and unnecessarily hard to customize.

## [Demo](https://codesandbox.io/p/github/Apestein/better-react-infinite-scroll/main)

## [Source Code](https://github.com/Apestein/better-react-infinite-scroll/blob/main/src/App.tsx)

## Install or just copy and paste below.

```ts
import React from "react";

interface InfiniteScrollProps extends React.HTMLAttributes<HTMLDivElement> {
  fetchNextPage: () => void;
  hasNextPage: boolean;
  loadingMessage: React.ReactNode;
  endingMessage: React.ReactNode;
}

// eslint-disable-next-line react/display-name
export const InfiniteScroller = React.forwardRef<
  HTMLDivElement,
  InfiniteScrollProps
>(
  (
    {
      fetchNextPage,
      hasNextPage,
      endingMessage,
      loadingMessage,
      children,
      ...props
    },
    ref
  ) => {
    const observerTarget = React.useRef(null);

    React.useEffect(() => {
      const observer = new IntersectionObserver(
        (entries) => {
          if (entries[0]?.isIntersecting && hasNextPage) fetchNextPage();
        },
        { threshold: 1 }
      );

      if (observerTarget.current) {
        observer.observe(observerTarget.current);
      }

      return () => observer.disconnect();
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
      <div ref={ref} {...props} style={{ overflowAnchor: "none" }}>
        {children}
        <div ref={observerTarget} />
        {hasNextPage ? loadingMessage : endingMessage}
      </div>
    );
  }
);
```

## How to use: normal scroll

```ts
import { InfiniteScroller } from "better-react-infinite-scroll";

return (
  <InfiniteScroller
    fetchNextPage={fetchNextPage}
    hasNextPage={hasNextPage}
    loadingMessage={<p>Loading...</p>}
    endingMessage={<p>The beginning of time...</p>}
    // className="overflow-auto" <= scroll target, may or may not need this
  >
    {elements.map((el) => (
      <div key={el.id}>{el}</div>
    ))}
  </InfiniteScroller>
);
```

## How to use: inverse scroll

For inverse scroll, use flex-direction: column-reverse. Scoller height must be defined. Here we use tailwind flex-1 (flex: 1 1 0%) but height: 300px would also work for example.

```ts
import { InfiniteScroller } from "better-react-infinite-scroll";

return (
  <div className="flex h-screen flex-col">
    <InfiniteScroller
      fetchNextPage={fetchNextPage}
      hasNextPage={hasNextPage}
      loadingMessage={<p>Loading...</p>}
      endingMessage={<p>The beginning of time...</p>}
      className="flex flex-1 flex-col-reverse overflow-auto"
    >
      {elements.map((el) => (
        <div key={el.id}>{el}</div>
      ))}
    </InfiniteScroller>
  </div>
);
```

## Need a grid to infinite scroll? Try this modification.

```ts
...
return (
    <section {...props} style={{ overflowAnchor: "none" }}>
      <ul className="grid ...">
        {children}
      </ul>
      <div ref={observerTarget} />
      {hasNextPage ? loadingMessage : endingMessage}
    </section>
  );
```

---
_Source: https://npm.io/package/better-react-infinite-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._