react-recycled-scrolling alternatives and similar libraries
Based on the "Infinite Scroll" category.
Alternatively, view react-recycled-scrolling alternatives based on common mentions on social networks and blogs.
-
react-infinity
A UITableView Inspired list and grid display solution with element culling and smooth animations
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of react-recycled-scrolling or a related project?
README
React Recycled Scrolling
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks
Install
npm install --save react-recycled-scrolling
Usage
All that is required is
- attrList: A list of items
- itemFn: A React functional component or even just a function that returns jsx for each element
const numberList = []
for (let i = 1; i <= 20000; i++) numberList.push(i)
const SheepRow = (no) => (<div> {no} Sheep </div>)
Then just drop in your RecycledList wherever you need it
import RecycledList from 'react-recycled-scrolling'
<RecycledList
itemFn = {SheepRow}
attrList = {numberList}
/>
Additional parameters are
- itemHeight: Height of each item, Default: 50
- rowOffset: How many buffer rows you need outside the viewable screen, Default: 6
- className: custom CSS for the outer scroll wrapper. You must have {position: relative} for recycled scroll to work
<RecycledList
itemFn = {SheepRow}
attrList = {numberList}
itemHeight = {120}
rowOffset = {10}
className = {'CustomContainer'}
/>
Example
https://codesandbox.io/s/jovial-haibt-y8mlf?fontsize=14
License
MIT
*Note that all licence references and agreements mentioned in the react-recycled-scrolling README section above
are relevant to that project's source code only.