https://github.com/closeio/use-infinite-scroll

Super simple React hook for creating an infinite scroll experience based on the IntersectionObserver API
https://github.com/closeio/use-infinite-scroll

infinite-scroll react react-hooks react-infinite-scroll reactjs use-infinite-scroll

Last synced: about 1 month ago
JSON representation

Super simple React hook for creating an infinite scroll experience based on the IntersectionObserver API

• Host: GitHub
• URL: https://github.com/closeio/use-infinite-scroll
• Owner: closeio
• License: mit
• Created: 2020-03-23T11:45:04.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T16:52:00.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T00:47:46.944Z (3 months ago)
• Topics: infinite-scroll, react, react-hooks, react-infinite-scroll, reactjs, use-infinite-scroll
• Language: JavaScript
• Homepage:
• Size: 2.99 MB
• Stars: 38
• Watchers: 23
• Forks: 8
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-infinite-scroll

[![NPM](https://img.shields.io/npm/v/@closeio/use-infinite-scroll.svg)](https://www.npmjs.com/package/@closeio/use-infinite-scroll) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-success)](https://prettier.io)

Super simple React hook for creating an infinite scroll experience based on the `IntersectionObserver` API.

[Check the live DEMO](https://closeio.github.io/use-infinite-scroll/).

### 

Interested in working on projects like this? [Close](https://close.com) is looking for [great engineers](https://jobs.close.com) to join our team!

## Install

```bash

yarn add @closeio/use-infinite-scroll

```

## Benefits

- Extremely lightweight (less than 1KB minzipped).

- It uses the `IntersectionObserver` API, so it doesn't need to listen to `scroll` events – which are known to cause performance issues.

- No other 3rd-party dependencies.

## Usage

```jsx

import React from 'react';

import useInfiniteScroll from '@closeio/use-infinite-scroll';

export default function MyComponent() {

  const [items, setItems] = useState([]);

  const [hasMore, setHasMore] = useState(false);

  const [page, loaderRef, scrollerRef] = useInfiniteScroll({ hasMore });

  useEffect(async () => {

    const data = await myApiCall({ page });

    setHasMore(data.hasMore);

    setItems(prev => [...prev, data.items]);

  }, [page]);

  return (

    


      {items.map(item => (

        
{item.name}

      ))}

      {hasMore && 
Loading…
}

    

  );

}

```


## License

MIT © [Close](https://github.com/closeio)