(instance = list),
}}
/>
```
**Solid**
```tsx
import { createVList } from "vlist/solid";
import { grid } from "vlist";
const { setRef, instance } = createVList(
() => ({ items: items(), item: { height: 200, template: renderPhoto } }),
[grid({ columns: 4, gap: 16 })],
);
return
;
```
`createVList` keeps the Solid primitive idiom. In a file that also uses the core builder, alias one of the two: `import { createVList as createSolidVList } from "vlist/solid"`.
**React**
```tsx
import { useVList, useVListEvent } from "vlist/react";
import { grid } from "vlist";
function Photos({ items }) {
const { containerRef, instanceRef } = useVList(
{ items, item: { height: 200, template: renderPhoto } },
[grid({ columns: 4, gap: 16 })],
);
useVListEvent(instanceRef, "item:click", ({ item }) => open(item));
return
;
}
```
Plugins are read once, at mount; changing them means remounting the list (in React, with a `key`). An `items` change updates the list in place. `scroll.mode` and other structural options also take effect only at mount.
**Migrating from `vlist-vue`, `vlist-svelte`, `vlist-solidjs` or `vlist-react`.** Those packages are deprecated. Change the import path, and pass features as plugins instead of config fields:
| Deprecated package | Use |
|---|---|
| `vlist-vue` | `vlist/vue` |
| `vlist-svelte` | `vlist/svelte` |
| `vlist-solidjs` | `vlist/solid` |
| `vlist-react` | `vlist/react` |
```ts
// before
import { useVList } from "vlist-react";
useVList({ items, item, selection: { mode: "single" } });
// after
import { useVList } from "vlist/react";
import { selection } from "vlist";
useVList({ items, item }, [selection({ mode: "single" })]);
```
Their 3.1 releases will be built on these entries and keep the config-based API, so existing code keeps working while you migrate.
## Docs & Examples
**18 interactive examples, full API reference, tutorials, and live benchmarks → [vlist.io](https://vlist.io)**
## Migrating from v1
v2 is a ground-up rewrite — simpler API, 55% smaller base bundle, zero-allocation scroll path. [Full announcement →](https://vlist.io/blog/v2)
| v1 | v2 |
|----|-----|
| `vlist(config).use(withGrid()).build()` | `createVList(config, [grid()])` |
| `withGrid`, `withSelection`, … | `grid`, `selection`, … |
| `VListFeature` | `VListPlugin` |
| `BuilderContext` | `PluginContext` |
| `.vlist-items` | `.vlist-content` |
The instance API (`setItems`, `scrollToIndex`, `on`, `destroy`) is unchanged.
## License
[MIT](LICENSE) — Built by [Floor IO](https://floor.io)
## Acknowledgments
Thanks to Alexander Klaiber for graciously transferring the `vlist` package name on npm.
---
_Source: https://npm.io/package/vlist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._