{"library":"react-infinite-scroll-component","title":"React Infinite Scroll Component","description":"`react-infinite-scroll-component` is a lightweight (4.15 kB) and efficient React component designed to implement infinite scrolling experiences in web applications. The current stable version is v7.1.0, with an active development cadence indicated by recent major and minor releases. A key differentiator is its transition to an `IntersectionObserver`-based triggering mechanism in v7.1.0, which enhances performance by running off the main thread and eliminating the need for scroll event throttling, leading to zero runtime dependencies. It supports conventional bottom-to-top scrolling, inverse scrolling (top-to-bottom), and a \"pull down to refresh\" feature. The component can operate on the document body, within a fixed-height container, or target a specific scrollable DOM element via its ID or a direct `HTMLElement` reference, offering flexibility in integration scenarios. It also requires React 17+ and Node.js 18.18.0+ for development.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-infinite-scroll-component"],"cli":null},"imports":["import InfiniteScroll from 'react-infinite-scroll-component';","const InfiniteScroll = require('react-infinite-scroll-component');","import type { InfiniteScrollProps } from 'react-infinite-scroll-component';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport InfiniteScroll from 'react-infinite-scroll-component';\n\ninterface Item {\n  id: number;\n  content: string;\n}\n\nconst style = {\n  padding: 15,\n  borderBottom: '1px solid #eee',\n  minHeight: 50,\n};\n\nconst App: React.FC = () => {\n  const [items, setItems] = useState<Item[]>(\n    Array.from({ length: 20 }, (_, i) => ({ id: i, content: `Initial Item #${i}` }))\n  );\n  const [hasMore, setHasMore] = useState(true);\n\n  const fetchMoreData = () => {\n    if (items.length >= 100) {\n      setHasMore(false);\n      return;\n    }\n    // Simulate an API call\n    setTimeout(() => {\n      setItems((prevItems) => [\n        ...prevItems,\n        ...Array.from({ length: 20 }, (_, i) => ({\n          id: prevItems.length + i,\n          content: `Fetched Item #${prevItems.length + i}`,\n        })),\n      ]);\n    }, 1500);\n  };\n\n  const refreshData = () => {\n    // Simulate re-fetching initial data for pull-to-refresh\n    return new Promise<void>((resolve) => {\n      setTimeout(() => {\n        setItems(Array.from({ length: 20 }, (_, i) => ({ id: i, content: `Refreshed Item #${i}` })));\n        setHasMore(true);\n        resolve();\n      }, 1000);\n    });\n  };\n\n  return (\n    <div>\n      <h1 style={{ textAlign: 'center' }}>Infinite Scroll Demo</h1>\n      <div\n        id=\"scrollableDiv\"\n        style={{\n          height: 400,\n          overflow: 'auto',\n          margin: '20px auto',\n          border: '1px solid #ccc',\n          width: '80%',\n        }}\n      >\n        <InfiniteScroll\n          dataLength={items.length}\n          next={fetchMoreData}\n          hasMore={hasMore}\n          loader={<h4>Loading...</h4>}\n          endMessage={\n            <p style={{ textAlign: 'center', padding: '10px' }}>\n              <b>Yay! You have seen it all</b>\n            </p>\n          }\n          refreshFunction={refreshData}\n          pullDownToRefresh\n          pullDownToRefreshThreshold={50}\n          pullDownToRefreshContent={\n            <h3 style={{ textAlign: 'center', margin: 0, padding: '10px' }}>&#8595; Pull down to refresh</h3>\n          }\n          releaseToRefreshContent={\n            <h3 style={{ textAlign: 'center', margin: 0, padding: '10px' }}>&#8593; Release to refresh</h3>\n          }\n          scrollableTarget=\"scrollableDiv\"\n        >\n          {items.map((item) => (\n            <div key={item.id} style={style}>\n              {item.content}\n            </div>\n          ))}\n        </InfiniteScroll>\n      </div>\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"Demonstrates a basic infinite scroll setup with data loading, a loading indicator, an end message, and optional pull-down-to-refresh functionality within a defined scrollable container.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}