# react-virtual-scroll-renderer

> virtual scroll for react

Latest version **1.0.0** (published 2021-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-virtual-scroll-renderer
pnpm add react-virtual-scroll-renderer
yarn add react-virtual-scroll-renderer
bun add react-virtual-scroll-renderer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-11-27 |
| First published | 2021-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 16.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Woomin-Jeon |
| Maintainers | woomin-jeon |

## Links

- npm: https://www.npmjs.com/package/react-virtual-scroll-renderer
- Repository: https://github.com/Woomin-Jeon/react-virtual-scroll-renderer
- Issues: https://github.com/Woomin-Jeon/react-virtual-scroll-renderer/issues
- npm.io page: https://npm.io/package/react-virtual-scroll-renderer

## Recent versions

- 1.0.0 (latest) — 2021-11-27
- 0.0.1 — 2021-11-27

## README

# react-virtual-scroll-renderer

The virtual scroll for React.  

`react-virtual-scroll-renderer` does not force the heights of the elements to be fixed. In other words, rendering elements may have various heights.  
Also, `react-virtual-scroll-renderer` maintains virtual scrolling without problems for element deletion or element height change due to element data change.

## Install

```bash
$ yarn add react-virtual-scroll-renderer
```

## Usage

```tsx
import { VirtualScrollRenderer, VirtualScrollItem } from 'react-virtual-scroll-renderer'

const ItemList: React.FC = ({ scrollElement, itemList }) => {
  return (
    <VirtualScrollRenderer
      scrollElement={scrollElement}
      virtualItemCount={8}
      itemList={itemList}
      render={(itemList) => (
        <ul>
          {itemList.map((item) => 
            <li key={item.data.id}>
              <VirtualScrollItem item={item}>
                <Item item={item} />
              </VirtualScrollItem>
            </li>
          )}
        </ul>
      )}
    />
  )
}
```

## Demo

![Nov-27-2021 22-45-30](https://user-images.githubusercontent.com/59194356/143684028-68793886-19da-4d1a-acbc-c56dad223e99.gif)

---
_Source: https://npm.io/package/react-virtual-scroll-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._