vlist-react

React hooks for @floor/vlist — lightweight, zero-dependency virtual scrolling.

npm install @floor/vlist vlist-react

import { useVList } from 'vlist-react';
import '@floor/vlist/styles';

function UserList({ users }) {
  const { containerRef, instanceRef } = useVList({
    item: {
      height: 48,
      template: (user) => `<div class="user">${user.name}</div>`,
    },
    items: users,
  });

  return <div ref={containerRef} style={{ height: 400 }} />;
}

• useVList(config) — Creates a virtual list. Returns { containerRef, instanceRef, getInstance }.
• useVListEvent(instanceRef, event, handler) — Subscribe to vlist events with automatic cleanup.

Config accepts all @floor/vlist options minus container (handled by the ref). Feature fields like adapter, grid, groups, selection, scrollbar, and estimatedHeight are translated into .use(withX()) calls automatically.

Full usage guide, feature config examples, and TypeScript types: Framework Adapters — React

MIT © Floor IO