🚀 React Virtual Renderer

High-performance React virtualization library for large lists, grids, tables, infinite scrolling, chat apps, 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.

✨ 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:

• Chat applications (WhatsApp-style, reverse scroll)
• Large data tables (10k+ rows)
• Infinite feeds
• E-commerce product catalogs
• Masonry / Pinterest layouts
• Real-time dashboards
• Search-heavy UIs

⚡ 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

npm install react-virtual-renderer

## 🚀 Quick Start Examples

---

### 📋 Basic Virtual List

```tsx
import { VirtualList } from "react-virtual-renderer";

const items = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`,
}));

export default function App() {
  return (
    <VirtualList
      items={items}
      height={600}
      estimatedItemSize={40}
      renderItem={({ item }) => (
        <div style={{ padding: 12 }}>
          {item.name}
        </div>
      )}
    />
  );
}