Popularity
0.6
Growing
Activity
6.7
Declining
13
1
0
Monthly Downloads: 0
Programming language: JavaScript
Tags:
UI Components
Infinite Scroll
react-recycled-scrolling alternatives and similar libraries
Based on the "Infinite Scroll" category
-
react-virtualized
React components for efficiently rendering large lists and tabular data. -
react-lazyload
Lazyload your Component, Image or anything matters the performance. -
react-infinite
A browser-ready efficient scrolling container based on UITableView. -
react-list
A versatile infinite scroll React component. -
react-infinity
A UITableView Inspired list and grid display solution with element culling and smooth animations. -
react-infinite-grid
A React component which renders a grid of elements.
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.