# react-super-infinite-scroller > An Infinite Scroll component for React using Intersection Observer API. Latest version **0.4.0** (published 2022-09-06) · MIT license · 0 weekly downloads ## Install ```sh npm install react-super-infinite-scroller pnpm add react-super-infinite-scroller yarn add react-super-infinite-scroller bun add react-super-infinite-scroller ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.4.0 | | Published | 2022-09-06 | | First published | 2022-08-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 13.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Abhishek Mondal | | Maintainers | abhishekmondal | | Keywords | react-infinite-scroll, react, infinite, scroller, infinite-scroll-react | ## Links - npm: https://www.npmjs.com/package/react-super-infinite-scroller - Repository: https://github.com/AbhishekMondal1/react-super-infinite-scroller - Homepage: https://github.com/AbhishekMondal1/react-super-infinite-scroller#readme - Issues: https://github.com/AbhishekMondal1/react-super-infinite-scroller/issues - npm.io page: https://npm.io/package/react-super-infinite-scroller ## 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.4.0 (latest) — 2022-09-06 - 0.3.0 — 2022-08-31 - 0.2.0 — 2022-08-04 - 0.1.0 — 2022-08-01 ## README # react-super-infinite-scroller An Infinite Scroll component for React using Intersection Observer API. [![npm version](https://img.shields.io/npm/v/react-super-infinite-scroller.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/react-super-infinite-scroller) [![coverage](https://img.shields.io/codecov/c/github/AbhishekMondal1/react-super-infinite-scroller?style=flat-square&logo=codecov&token=XPQH5LI3U2)](https://codecov.io/gh/AbhishekMondal1/react-super-infinite-scroller) ![minified dize](https://img.shields.io/bundlephobia/min/react-super-infinite-scroller?style=flat-square&logo=javascript) [![snyk](https://img.shields.io/snyk/vulnerabilities/npm/react-super-infinite-scroller?style=flat-square&logo=snyk)](https://snyk.io/test/github/AbhishekMondal1/react-super-infinite-scroller) [![MIT License](https://img.shields.io/github/license/AbhishekMondal1/react-super-infinite-scroller?style=flat-square&)](https://github.com/AbhishekMondal1/react-super-infinite-scroller/blob/master/LICENSE)

## ⚙️ Installation npm ```bash npm install --save react-super-infinite-scroller ``` yarn ```bash yarn add react-super-infinite-scroller ``` ## 🎉 Features - 🖱️ **Infinite Scrolling** - Uses Intersection Observer API (no need to use scroll event listener) - 🔝 **Reverse Scroll** - Chat history like scrolling (scroll to top to load more, i.e., reverse scrolling) - 🎨 **Customizable Loading Component** - You can use your own loader component - 📜 **TypeScript Support** - Written in TypeScript - 📦 **Tiny Bundle** - 1.2 kB (minified) size ## 📖 Usage Basic example ```jsx import InfiniteScroll from "react-super-infinite-scroller"; {items.map((item, index) => (

{item}

))} ; ``` Real World example ```jsx import React, { useEffect, useState } from "react"; import axios from "axios"; import InfiniteScroll from "react-super-infinite-scroller"; function App() { const [items, setItems] = useState([]); const [page, setPage] = useState(1); const [hasMorePages, setHasMorePages] = useState(true); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { setLoading(true); const res = await axios.get( `https://dummyjson.com/products?skip=${page - 1}&limit=10`, ); setItems((prev) => [...prev, ...res.data.products]); setHasMorePages(items.length < res.data.total); setLoading(false); }; fetchData(); }, [page]); return (
{items.map((p) => (

{p.title}

{p.price}$

))}
); } export default App; ``` ## 🚀 Demo ### Live Example 🧑‍💻 Infinite scroll with 100 elements
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/w0wtup) Reverse scroll
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/t7g5oc) ## 🎛️ Props | name | type | required | description | | ----------------- | ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | `setPage` | function | ✅ yes | useState function to set the page number. | | `hasMorePages` | boolean | ✅ yes | If there are more items to load. | | `showLoader` | boolean | ✅ yes | It tells if data is fetching. When new items are fetching loading state is set to true | | `children` | Node | ✅ yes | Items you need to scroll. | | `loader` | Node | ❌ no | Custom loader component. | | `reverse` | boolean | ❌ no | Scroll and load items in reverse from top. | | `thresholdValue` | number | ❌ no | Value (between 0.0 and 1.0), representing the percentage target element is visible to trigger the callback. | | `rootElement` | HTMLElement | ❌ no | Root element of the observer. The element that is used as the viewport for checking visibility of the target. Default is document viewport. | | `rootMarginValue` | string | ❌ no | Margin around the target element. `rootMarginValue` represents the margin around the target element that must be in view in order to trigger a callback. | ## License 📜 [MIT](https://github.com/AbhishekMondal1/react-super-infinite-scroller/blob/master/LICENSE) --- _Source: https://npm.io/package/react-super-infinite-scroller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._