{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-infinite-scroller"],"cli":null},"imports":["import InfiniteScroll from 'react-infinite-scroller';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}