@virtual-grid/react

Simplified virtualization using @tanstack/virtual

Demo - Docs - Examples

Installation

npm install @virtual-grid/react

Usage

Example with the provided <Grid /> component:

import * as React from 'react';
import { Grid, useGrid } from '@virtual-grid/react';

const App = () => {
  const ref = React.useRef<HTMLDivElement>(null);

  const grid = useGrid({
    scrollRef: ref,
    count: 1000
    // ...
  });

  return (
    <div ref={ref} style={{ height: '400px', overflow: 'auto' }}>
      <Grid grid={grid}>{(i) => <div key={i}>...</div>}</Grid>
    </div>
  );
};

License

MIT