useVirtualList
A hook that allows you to use virtual list to render huge chunks of list data.
Examples
Default usage
Row: 0
Row: 1
Row: 2
Row: 3
Row: 4
Row: 5
Row: 6
Row: 7
Row: 8
Row: 9
Row: 10
Row: 11
Row: 12
Row: 13
Row: 14
Row: 15
Default usage
render 100,000 items in a list.
Dynamic item height
Row: 0 size: small
Row: 1 size: large
Row: 2 size: small
Row: 3 size: large
Row: 4 size: small
Row: 5 size: large
Row: 6 size: small
Row: 7 size: large
Row: 8 size: small
Row: 9 size: large
Row: 10 size: small
Row: 11 size: large
Row: 12 size: small
Row: 13 size: large
Row: 14 size: small
Dynamic item height
Specify item height dynamically.
API
const [list, scrollTo] = useVirtualList<T>( originalList: Accessor<T[]> | T[], options: { containerTarget: (() => Element) | Element, wrapperTarget: (() => Element) | Element, itemHeight: number | ((index: number, data: T) => number), overscan?: number, });
const [list, scrollTo] = useVirtualList<T>( originalList: Accessor<T[]> | T[], options: { containerTarget: (() => Element) | Element, wrapperTarget: (() => Element) | 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. | Accessor<T[]> | T[] | [] |
| options | config | Options | - |
Options
| Property | Description | Type | Default |
|---|---|---|---|
| containerTarget | Outter Container，support DOM element or ref | () => Element | Element | - |
| wrapperTarget | Inner Container，DOM element or ref | () => Element | Element | - |
| itemHeight | Item height, accept a pixel value or a function that returns the height | number | ((index: number, data: T) => number) | - |
| overscan | The extra buffer items outside of the view area | number | 5 |
Result
| Property | Description | Type |
|---|---|---|
| list | The current portion of data need to be rendered to DOM | Accessor<{ data: T, index: number }[]> |
| scrollTo | Scroll to specific index | (index: number) => void |