{"id":13872,"library":"react-infinite-scroller","title":"React Infinite Scroller","description":"React Infinite Scroller is a lightweight and flexible React component designed to implement infinite scrolling functionality in web applications. It supports both window-based and DOM-element-based scrolling, making it versatile for various layouts. The package is known for not requiring explicit item heights and includes support for 'chat history' or reverse mode scrolling. Currently at version 1.2.6, it demonstrates active maintenance with recent updates for React 18 compatibility. This component provides a simple alternative to more feature-rich (and often heavier) scroll libraries, offering a minimal footprint (approximately 2.2KB minified and gzipped) while being unit-tested and widely adopted in production environments.","status":"active","version":"1.2.6","language":"javascript","source_language":"en","source_url":"git://github.com/danbovey/react-infinite-scroller","tags":["javascript","infinite","scroll","react"],"install":[{"cmd":"npm install react-infinite-scroller","lang":"bash","label":"npm"},{"cmd":"yarn add react-infinite-scroller","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-infinite-scroller","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React component rendering.","package":"react","optional":false}],"imports":[{"note":"The primary component is exported as a default export, making direct named imports incorrect.","wrong":"const InfiniteScroll = require('react-infinite-scroller');","symbol":"InfiniteScroll","correct":"import InfiniteScroll from 'react-infinite-scroller';"}],"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport InfiniteScroll from 'react-infinite-scroller';\n\nconst itemsPerPage = 20;\nlet currentItemCount = 0;\n\nfunction App() {\n  const [items, setItems] = useState([]);\n  const [hasMore, setHasMore] = useState(true);\n  const [scrollParentRef, setScrollParentRef] = useState(null);\n\n  const fetchMoreItems = (page) => {\n    // Simulate API call\n    setTimeout(() => {\n      const newItems = [];\n      for (let i = 0; i < itemsPerPage; i++) {\n        if (currentItemCount < 100) { // Simulate a total of 100 items\n          newItems.push(<div key={currentItemCount}>Item #{currentItemCount}</div>);\n          currentItemCount++;\n        } else {\n          setHasMore(false);\n          break;\n        }\n      }\n      setItems((prevItems) => [...prevItems, ...newItems]);\n    }, 500);\n  };\n\n  useEffect(() => {\n    // Initial load happens via pageStart={0} prop\n    console.log('Component mounted or scrollParentRef set');\n  }, [scrollParentRef]);\n\n  return (\n    <div style={{ height: '500px', overflow: 'auto', border: '1px solid #ccc' }} ref={setScrollParentRef}>\n      <h2>Infinite Scroller within a Custom DIV</h2>\n      <InfiniteScroll\n        pageStart={0}\n        loadMore={fetchMoreItems}\n        hasMore={hasMore}\n        loader={<div className=\"loader\" key={0}>Loading more items...</div>}\n        useWindow={false}\n        getScrollParent={() => scrollParentRef}\n      >\n        {items.length > 0 ? items : <div>No items to display yet.</div>}\n      </InfiniteScroll>\n      {!hasMore && <div style={{ textAlign: 'center', padding: '10px' }}>All items loaded!</div>}\n    </div>\n  );\n}\n\nexport default App;\n","lang":"javascript","description":"This example demonstrates how to implement infinite scrolling within a specific DOM element using `getScrollParent` to define the scrollable container and simulates loading more items from an API."},"warnings":[{"fix":"Ensure your custom loader component has a unique `key` prop, e.g., `<div className=\"loader\" key={0}>Loading ...</div>`.","message":"When using a custom loader element for the `loader` prop, the top-level component passed to `loader` now requires a unique `key` prop to prevent React warnings and ensure correct rendering.","severity":"breaking","affected_versions":">=1.1.3"},{"fix":"Ensure your CSS correctly defines the height of the scrollable container and its children. Verify that the height of the container equals the entire height of its items. Consider adding an internal `isLoading` state to your `loadMore` function to prevent overlapping API calls.","message":"Double or non-stop calls to the `loadMore` callback can occur if CSS layout is not correctly configured, particularly if the container height does not correctly encompass all items. The component relies on container height calculations.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always include `useWindow={false}` when providing a `getScrollParent` function or a `parent` prop for non-window scrolling.","message":"When using `getScrollParent` for a custom scrollable element, ensure that the `useWindow` prop is explicitly set to `false` to instruct the component to use the specified parent for scroll calculations instead of the window.","severity":"gotcha","affected_versions":">=1.2.2"},{"fix":"Update the `hasMore` prop to `false` in your component's state once all available data has been loaded from your source. This disables further `loadMore` calls and removes event listeners.","message":"The `hasMore` prop must accurately reflect whether there are more items to load. If `hasMore` remains `true` indefinitely when no more items exist, the `loadMore` function may be called unnecessarily, leading to excessive network requests.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.2.6':64 '18':74 '2.2':97 'activ':67 'adopt':109 'altern':81 'applic':22 'approxim':96 'base':28,33 'chat':55 'compat':75 'compon':13,77 'current':61 'demonstr':66 'design':14 'dom':31 'dom-element-bas':30 'element':32 'environ':112 'explicit':48 'featur':85 'feature-rich':84 'flexibl':11 'footprint':95 'function':19 'gzip':101 'heavier':89 'height':50 'histori':56 'implement':16 'includ':52 'infinit':2,5,17,114 'item':49 'javascript':113 'kb':98 'known':44 'layout':40 'librari':91 'lightweight':9 'mainten':68 'make':35 'minifi':99 'minim':94 'mode':59 'offer':92 'often':88 'packag':42 'product':111 'provid':78 'react':1,4,12,73,116 'recent':70 'requir':47 'revers':58 'rich':86 'scroll':18,34,60,90,115 'scroller':3,6 'simpl':80 'support':24,53 'test':106 'unit':105 'unit-test':104 'updat':71 'various':39 'versatil':37 'version':63 'web':21 'wide':108 'window':27 'window-bas':26","created_at":"2026-04-20T01:56:44.844000+00:00","updated_at":"2026-04-20T01:56:44.844000+00:00","problems":[{"fix":"This issue was addressed in `v1.2.1`. Ensure you are on a recent version. If using `getScrollParent`, ensure the ref is consistently available before `InfiniteScroll` attempts to access it.","cause":"The component attempted to access `offsetHeight` on a null or undefined DOM element, often due to race conditions or incorrect element references.","error":"TypeError: Cannot read properties of null (reading 'offsetHeight')"},{"fix":"Update to version `1.2.5` or newer to resolve this Chrome-specific vertical scrolling warning.","cause":"A specific browser-related issue affecting vertical scrolling behavior, particularly in Chrome, was identified and fixed.","error":"Vertical scrolling warning that occurred in Google Chrome"},{"fix":"Upgrade to version `1.2.3` or later to fix the incorrect scrollbar positioning when in reverse scrolling mode.","cause":"A bug caused the scrollbar position to be miscalculated when the `isReverse` prop was set to `true`, commonly used for 'chat history' layouts.","error":"When isReverse is true, the scroll bar position is incorrect"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/danbovey/react-infinite-scroller","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-infinite-scroller","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}