https://github.com/sarons/react-recycled-scrolling

Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks
https://github.com/sarons/react-recycled-scrolling

list listview performance react react-component react-hooks recyclerview scrolling virtualization

Last synced: about 1 month ago
JSON representation

Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks

• Host: GitHub
• URL: https://github.com/sarons/react-recycled-scrolling
• Owner: sarons
• License: mit
• Created: 2019-09-11T16:23:07.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-18T19:07:51.000Z (3 months ago)
• Last Synced: 2024-09-21T11:47:59.455Z (3 months ago)
• Topics: list, listview, performance, react, react-component, react-hooks, recyclerview, scrolling, virtualization
• Language: JavaScript
• Homepage: https://y8mlf.csb.app/
• Size: 2.04 MB
• Stars: 30
• Watchers: 2
• Forks: 1
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-recycled-scrolling - [npm](https://www.npmjs.com/package/react-recycled-scrolling) - [demo](https://y8mlf.csb.app/) - Simulate scrolling using fixed number of DOM elements for large lists with React Hooks (UI Components / Infinite Scroll)

README

        
# React Recycled Scrolling

![npm](https://img.shields.io/npm/v/react-recycled-scrolling)

[![Build Status](https://travis-ci.org/sarons/react-recycled-scrolling.svg?branch=master)](https://travis-ci.org/sarons/react-recycled-scrolling)

[![Coverage Status](https://coveralls.io/repos/github/sarons/react-recycled-scrolling/badge.svg?branch=master)](https://coveralls.io/github/sarons/react-recycled-scrolling?branch=master)

> Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square

[npm]: https://www.npmjs.org/package/npm-package

## Install

```bash

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

```javascript

const numberList = []

for (let i = 1; i <= 20000; i++) numberList.push(i)

const SheepRow = (no) => (
 {no} Sheep 
)

```


Then just drop in your RecycledList wherever you need it

```javascript

import RecycledList from 'react-recycled-scrolling'

```

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

```javascript

```

## Example

[![Edit jovial-haibt-y8mlf](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/jovial-haibt-y8mlf?fontsize=14)

https://codesandbox.io/s/jovial-haibt-y8mlf?fontsize=14

## License

MIT