Virtualization for React
This package provides three powerful virtualization components for React applications:
1. Virtualization: A core component for rendering large lists efficiently
2. VirtualizationTable: A specialized component for handling large datasets in tabular format
3. VirtualizationGrid: A component for efficiently rendering large two-dimensional grids
All components are designed to optimize performance by rendering only the visible portions of your content.
``bash`
npm install simple-virtualizationor
yarn add simple-virtualization
The package includes a comprehensive example application that demonstrates all three virtualization components. The example app showcases various implementation patterns and features:
`bash`
npm run example
The example app demonstrates:
- Basic and advanced usage of all three components
- Table virtualization with sorting and custom column widths
- Grid virtualization with interactive features
- Dynamic height calculations
- Custom styling examples
- Performance optimization techniques
- Different types of content rendering
- Responsive design patterns
- Integration with TypeScript
`typescript
import { Virtualization } from 'simple-virtualization';
function SimpleList() {
const items = Array.from({ length: 10000 }, (_, i) => Item ${i});
return (
className="virtual-list"
estimatedItemHeight={40}
overscanCount={5}
/>
);
}
`
`typescript
import { VirtualizationTable } from 'simple-virtualization';
function DataTable() {
const data = Array.from({ length: 10000 }, (_, i) => ({
id: i,
name: Item ${i},
value: Math.random() * 100
}));
return (
Header={({ onSort, sortState }) => (
$3
`typescript
import { VirtualizationGrid } from 'simple-virtualization';function DataGrid() {
return (
dimensions={{
rowCount: 1000,
columnCount: 1000
}}
estimatedColumnWidth={100}
estimatedRowHeight={50}
overscanCount={2}
renderCell={(rowIndex, columnIndex) => (
Cell ${rowIndex},${columnIndex}
)}
className="virtual-grid"
style={{ height: '500px' }}
/>
);
}
`Component Props
$3
`typescript
interface VirtualizationProps {
items: ReactComponentOrElement[];
className?: string;
itemClassName?: string;
style?: CSSProperties;
itemStyle?: CSSProperties;
overscanCount?: number;
initialRenderCount?: number;
estimatedItemHeight?: number;
}
`$3
`typescript
interface VirtualizationTableProps {
data: T[];
Header: React.ComponentType<{
onSort: (column: string) => void;
sortState: SortState;
}>;
Footer?: React.ComponentType;
Row: React.ComponentType<{ item: T; index: number }>;
style?: React.CSSProperties;
headerStyle?: React.CSSProperties;
footerStyle?: React.CSSProperties;
rowStyle?: React.CSSProperties;
tableHeight?: string | number;
estimatedRowHeight?: number;
overscanCount?: number;
columnWidths?: string[];
footerDistributed?: boolean;
defaultSortColumn?: string;
defaultSortDirection?: SortDirection;
}
`$3
`typescript
interface VirtualizationGridProps {
dimensions: {
rowCount: number;
columnCount: number;
};
estimatedColumnWidth?: number;
estimatedRowHeight?: number;
overscanCount?: number;
renderCell: (rowIndex: number, columnIndex: number) => React.ReactNode;
className?: string;
style?: CSSProperties;
cellClassName?: string;
cellStyle?: CSSProperties;
}
`Advanced Features
$3
Both list and table components automatically measure and adapt to varying content heights:
`typescript
items={items}
estimatedItemHeight={50} // Initial estimate
// Heights are automatically measured and cached
/>
`$3
`typescript
dimensions={{ rowCount: 100, columnCount: 100 }}
cellStyle={{
border: '1px solid #ccc',
padding: '8px'
}}
renderCell={(row, col) => (
{/ Custom cell content /}
)}
/>
`$3
`typescript
defaultSortColumn="name"
defaultSortDirection="asc"
columnWidths={['200px', '150px', '100px']}
// Columns will resize proportionally when container width changes
/>
`Performance Optimizations
$3
- Binary search for efficient item positioning
- Cached height measurements
- Scroll direction-aware rendering
- Minimal DOM updates
- RequestAnimationFrame for smooth scrolling
- Stable callback optimizations$3
- Virtualized row rendering
- Optimized scroll synchronization
- Efficient column width calculations
- Debounced resize handling
- Memoized sorting operations$3
- Efficient viewport calculation
- Minimal cell re-rendering
- Optimized scroll handling
- Memory-efficient cell management
- Smart overscan implementationBrowser Support
Supports all modern browsers with these features:
- ResizeObserver API
- RequestAnimationFrame
- CSS Grid
- Flexbox
- IntersectionObserver (optional)
TypeScript Support
All components include comprehensive TypeScript definitions:
`typescript
// Example type usage
type YourDataType = {
id: number;
name: string;
// ...
};
data={yourData}
// TypeScript will ensure type safety
/>
``Contributions are welcome! Please follow these steps:
1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request
MIT License
For issues and feature requests, please use the GitHub issue tracker.