Popularity
0.6
Growing
Activity
6.7
Declining
13
1
0

Monthly Downloads: 0
Programming language: JavaScript

react-recycled-scrolling alternatives and similar libraries

Based on the "Infinite Scroll" category

Do you think we are missing an alternative of react-recycled-scrolling or a related project?

Add another 'Infinite Scroll' Library

README

React Recycled Scrolling

npm Build Status Coverage Status

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

Edit jovial-haibt-y8mlf

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.