vlist-solidjs

SolidJS primitives for @floor/vlist — lightweight, zero-dependency virtual scrolling.

Install

npm install @floor/vlist vlist-solidjs

Quick Start

import { createVList } from 'vlist-solidjs';
import { createSignal } from 'solid-js';
import '@floor/vlist/styles';

function UserList() {
  const [users] = createSignal(
    Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `User ${i + 1}` }))
  );

  const { setRef, instance } = createVList(() => ({
    items: users(),
    item: {
      height: 48,
      template: (user) => `<div>${user.name}</div>`,
    },
  }));

  return <div ref={setRef} style={{ height: '400px' }} />;
}

API

• createVList(config) — Creates a virtual list. Config is an accessor returning the vlist config. Returns { setRef, instance }.
• createVListEvent(instance, 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, and scrollbar are translated into .use(withX()) calls automatically.

Documentation

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

License

MIT © Floor IO