useVirtualList

Overview

A hook that allows you to use virtual list to render huge chunks of list data.

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useVirtualList.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useVirtualList.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useVirtualList.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useVirtualList.json

A hook that allows you to use virtual list to render huge chunks of list data.

Examples

Default usage

Dynamic item height

API

const [list, scrollTo] = useVirtualList<T>(
  originalList: T[],
  options: {
    containerTarget: (() => Element) | Element | MutableRefObject<Element>,
    wrapperTarget: (() => Element) | Element | MutableRefObject<Element>,
    itemHeight: number | ((index: number, data: T) => number),
    overscan?: number,
  }
);

Params

| Property | Description | Type | Default | | | | - | | originalList | The original list that contains a lot of data entries. Attention: must undergo useMemo processing or never change, otherwise there will be a dead loop | T[] | [] | | options | config | Options | - |

Options

| Property | Description | Type | Default | | -- | --- | | list | The current portion of data need to be rendered to DOM | { data: T, index: number }[] | | scrollTo | Scroll to specific index | (index: number) => void |