# React Virtual Renderer

High-performance React virtualization library for **large lists, grids, infinite scrolling, dynamic heights, and masonry layouts**.

A modern alternative to `react-window` and `react-virtualized` with **better layout flexibility, TypeScript-first API, and advanced rendering control**.

![npm version](https://img.shields.io/npm/v/react-virtual-renderer)
![downloads](https://img.shields.io/npm/dm/react-virtual-renderer)
![bundle size](https://img.shields.io/bundlephobia/minzip/react-virtual-renderer)
![license](https://img.shields.io/npm/l/react-virtual-renderer)

🌐 **Live Demo:** https://react-virtual-renderer.vercel.app/

---

## ✨ Why React Virtual Renderer?

Rendering thousands of DOM nodes can severely degrade performance in React apps.

This library solves it by rendering **only visible items + overscan buffer**, enabling smooth performance at scale.

### Built for:

- Large data tables (10k+ rows)
- Infinite feeds
- E-commerce product catalogs
- Masonry / Pinterest layouts
- Dynamic height content

Most masonry libraries make you choose:

| | Virtualized | Custom scroll container | Dynamic height | List + Grid + Masonry |
|---|---|---|---|---|
| react-masonry-css | ❌ | ✅ | ❌ | ❌ |
| masonic | ✅ | ❌ | ❌ | ❌ |
| react-virtual-renderer | ✅ | ✅ | ✅ | ✅ |

**react-virtual-renderer is the only library that ships VirtualList, VirtualGrid, 
masonry layout, and useInfiniteScroll as a unified package with auto-measured 
dynamic height and full custom scroll container support.**

---

## Features

### Performance

- Virtualized List rendering
- Virtualized Grid system
- Infinite scroll support
- Reverse scrolling (chat apps)
- Overscan buffering
- Dynamic height measurement
- Measurement caching engine
- Stable scroll handling

### Layout Engine

- Fixed grid layout
- Masonry layout (Pinterest-style)
- Variable row heights
- Auto column calculation
- Sticky rows support
- Adaptive overscan based on scroll speed

### Developer Experience

- Full TypeScript support
- Hook-based API (`useVirtualList`)
- Imperative scroll control
- Ref forwarding support
- Zero dependencies
- React 18+ compatible

### Accessibility

- Minimal DOM updates
- Screen-reader safe structure
- Keyboard-friendly scrolling

---

## Installation

````bash
npm install react-virtual-renderer