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++ numberListconst SheepRow = <div> no Sheep </div>
Then just drop in your RecycledList wherever you need it
<RecycledListitemFn = SheepRowattrList = 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