Popularity
1.2
Growing
Activity
1.7
-
30
2
1

Programming language: JavaScript
License: MIT License

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.

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

Add another 'Infinite Scroll' Library
Build time-series-based applications quickly and at scale.
sponsored www.influxdata.com

Popular Comparisons

Write Clean JavaScript Code. Always.
sponsored www.sonarsource.com

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.