useVirtual

A React hook for implementing list virtualization, enabling efficient rendering of large datasets by only rendering visible items in the viewport.

Features

- 📋 List Virtualization: Render only visible items for optimal performance
- 📏 Dynamic Heights: Support for variable item heights
- 🔄 Horizontal & Vertical: Support for both scrolling directions
- 🎯 Overscan: Configurable buffer for smoother scrolling
- 📊 Performance Metrics: Track rendering performance
- 🎣 Scroll Control: Programmatic scrolling to specific items
- 📱 Mobile Optimized: Touch-friendly scrolling
- 🧮 Memory Efficient: Minimal memory footprint for large lists

Installation

``bash
npm install @custom-react-hooks/use-virtual
`

Usage

$3

`jsx
import React from 'react';
import { useVirtual } from '@custom-react-hooks/use-virtual';

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

const {
visibleItems,
totalHeight,
scrollToIndex,
scrollToTop
} = useVirtual({
items,
itemHeight: 50,
containerHeight: 400
});

return (


`jsx
import React from 'react';
import { useVirtual } from '@custom-react-hooks/use-virtual';

function DynamicHeightList() {
const items = Array.from({ length: 1000 }, (_, i) => ({
id: i,
content: Item ${i},
height: 50 + (i % 3) * 25 // Variable heights
}));

const getItemHeight = (index) => items[index].height;

const { visibleItems, totalHeight } = useVirtual({
items,
itemHeight: getItemHeight,
containerHeight: 600
});

return (


`jsx
import React from 'react';
import { useVirtual } from '@custom-react-hooks/use-virtual';

function HorizontalList() {
const items = Array.from({ length: 1000 }, (_, i) => Column ${i});

const { visibleItems, totalHeight } = useVirtual({
items,
itemHeight: 200, // Width in horizontal mode
containerHeight: 800, // Container width
horizontal: true
});

return (


`jsx
import React from 'react';
import { useVirtual } from '@custom-react-hooks/use-virtual';

function OptimizedList() {
const items = Array.from({ length: 50000 }, (_, i) => ({
id: i,
name: User ${i},
email: user${i}@example.com
}));

const { visibleItems, startIndex, endIndex } = useVirtual({
items,
itemHeight: 60,
containerHeight: 500,
overscan: 10, // Render 10 extra items for smoother scrolling
onScroll: ({ scrollTop, startIndex, endIndex }) => {
console.log(Scrolled to ${scrollTop}, showing items ${startIndex}-${endIndex});
}
});

return (


`jsx
import React from 'react';
import { useVirtual } from '@custom-react-hooks/use-virtual';

function VirtualGrid() {
const items = Array.from({ length: 10000 }, (_, i) => Cell ${i});
const itemsPerRow = 5;
const rows = Math.ceil(items.length / itemsPerRow);

const rowItems = Array.from({ length: rows }, (_, rowIndex) =>
items.slice(rowIndex itemsPerRow, (rowIndex + 1) itemsPerRow)
);

const { visibleItems } = useVirtual({
items: rowItems,
itemHeight: 100,
containerHeight: 400
});

return (