react-recycled-scrolling

sarons
esm Styles
react-recycled-scrolling JS library on GitHub react-recycled-scrolling JS library on npm Download react-recycled-scrolling JS library

react-recycled-scrolling React component

Version 1.0.8 License MIT
react-recycled-scrolling has no homepage
react-recycled-scrolling JS library on GitHub
react-recycled-scrolling JS library on npm
Download react-recycled-scrolling JS library
Keywords
reactreact-hooksreact-componentscrollingrecyclerviewlistviewperformancevirtualizationlistsimple

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