Simple, fast, small and flexible virtual list component for React.

• Virtualization with minimal setup.
• As fast as alternatives (and also faster in several cases!).
• Keeping bundle size small as much as possible (Currently about 3kB gzipped).
• Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, rtl direction, sticky, infinite scrolling, placeholder, scrollTo, dnd, table, and more.

https://inokawa.github.io/virtua/

npm install virtua

• react >= 16.14

If you use ESM and webpack 5, use react >= 18 to avoid Can't resolve react/jsx-runtime error.

import { List } from "virtua";

export const App = () => {
  return (
    <List style={{ height: 800 }}>
      {Array.from({ length: 1000 }).map((_, i) => (
        <div
          key={i}
          style={{
            height: Math.floor(Math.random() * 10) * 10 + 5,
            borderBottom: "solid 1px gray",
            background: "white",
          }}
        >
          {i}
        </div>
      ))}
    </List>
  );
};

And see examples for more usages.

• API reference

All contributions are welcome. If you find a problem, feel free to create an issue or a PR.

1. Clone this repo.
2. Run npm install.
3. Commit your fix.
4. Make a PR and confirm all the CI checks passed.