### Install Virtua Package Source: https://github.com/inokawa/virtua/blob/main/README.md Install the virtua package using npm. If targeting legacy browsers without ResizeObserver, consider including a polyfill. ```sh npm install virtua ``` -------------------------------- ### scrollTo() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md Scrolls the virtualized list to a specific pixel offset from the start. ```APIDOC ## scrollTo() ### Description Scroll to the given offset. ### Parameters #### offset - **offset** (number) - offset from start ### Returns - `void` ``` -------------------------------- ### scrollTo() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VListHandle.md Scrolls the virtualized list to a specific pixel offset from the start. ```APIDOC ## scrollTo(offset) ### Description Scroll to the given offset. ### Parameters #### offset - `offset` (number) - offset from start ### Returns - `void` ### Inherited from - `VirtualizerHandle.scrollTo` ``` -------------------------------- ### getItemOffset(index) Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md Retrieves the starting pixel offset of a specific item within the virtualized list. ```APIDOC ## getItemOffset(index) ### Description Get item offset from start. ### Parameters #### index - `index` (number) - index of item ### Returns - `number` - The starting offset of the item. ``` -------------------------------- ### scrollTo(offset) Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md Scrolls the virtualized list to an absolute pixel offset from the start of the container. ```APIDOC ## scrollTo(offset) ### Description Scroll to the given offset. ### Parameters #### offset - `offset` (number) - offset from start ### Returns - `void` ``` -------------------------------- ### scrollTo Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListHandle.md Scrolls the virtualized list to a specific pixel offset from the start. This method is inherited from VirtualizerHandle. ```APIDOC ## scrollTo() ### Description Scroll to the given offset. ### Parameters #### offset - **offset** (number) - offset from start ### Returns - `void` ### Inherited from - `VirtualizerHandle.scrollTo` ``` -------------------------------- ### scrollTo() Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VirtualizerHandle.md Scrolls the container to an absolute pixel offset from the start. ```APIDOC ## scrollTo() ### Description Scroll to the given offset. ### Parameters #### offset - **offset** (number) - offset from start ### Returns - **void** ``` -------------------------------- ### ref_key Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md An optional string key to reference the virtualizer instance. ```APIDOC ## ref_key ### Description An optional string key to reference the virtualizer instance. ### Type `string` ### Optional Yes ``` -------------------------------- ### style Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md Allows applying inline styles to the virtualizer element. ```APIDOC ## style ### Description Allows applying inline styles to the virtualizer element. ### Type `unknown` ### Optional Yes ``` -------------------------------- ### class Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md Allows applying CSS classes to the virtualizer element. ```APIDOC ## class ### Description Allows applying CSS classes to the virtualizer element. ### Type `unknown` ### Optional Yes ``` -------------------------------- ### startMargin Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerProps.md Optional offset in pixels to the scrollable parent before the virtualizer. This is useful if an element precedes the virtualizer, and its height needs to be accounted for. ```APIDOC ## startMargin? ### Description Optional offset in pixels to the scrollable parent before the virtualizer. This is useful if an element precedes the virtualizer, and its height needs to be accounted for. ### Type `number` ``` -------------------------------- ### getItemOffset() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/WindowVirtualizerHandle.md Retrieves the pixel offset of a specific item from the start of the scrollable area. ```APIDOC ## getItemOffset() ### Description Get item offset from start. ### Parameters #### index - **index** (number) - index of item ### Returns - **number** - The offset of the item. ``` -------------------------------- ### onVnodeBeforeMount Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md Hook called before the virtualizer's VNode is mounted. ```APIDOC ## onVnodeBeforeMount ### Description Hook called before the virtualizer's VNode is mounted. Can be a single hook or an array of hooks. ### Type `VNodeMountHook` | `VNodeMountHook[]` ### Optional Yes ``` -------------------------------- ### getItemOffset() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md Retrieves the pixel offset of a specific item from the start of the scrollable area. ```APIDOC ## getItemOffset() ### Description Get item offset from start. ### Parameters #### index - **index** (number) - index of item ### Returns - `number` - The offset of the item in pixels. ``` -------------------------------- ### getItemOffset() Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VirtualizerHandle.md Retrieves the pixel offset of a specific item from the start of the scroll container. ```APIDOC ## getItemOffset() ### Description Get item offset from start. ### Parameters #### index - **index** (number) - index of item ### Returns - **number** - The pixel offset of the item. ``` -------------------------------- ### VirtualizerHandle Methods Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/VirtualizerHandle.md This section details the methods available on the VirtualizerHandle interface for managing and querying virtualized lists. ```APIDOC ## findItemIndex() ### Description Finds the nearest item index from a given offset within the virtualized list. ### Parameters #### offset - **offset** (`number`) - The offset in pixels from the start of the scroll container. ### Returns - `number` - The index of the nearest item. ``` ```APIDOC ## getItemOffset() ### Description Retrieves the starting offset of a specific item from the beginning of the scrollable area. ### Parameters #### index - **index** (`number`) - The index of the item. ### Returns - `number` - The offset of the item from the start. ``` ```APIDOC ## getItemSize() ### Description Retrieves the size (height or width) of a specific item in the virtualized list. ### Parameters #### index - **index** (`number`) - The index of the item. ### Returns - `number` - The size of the item. ``` ```APIDOC ## scrollToIndex() ### Description Scrolls the virtualized list to bring the item specified by its index into view. ### Parameters #### index - **index** (`number`) - The index of the item to scroll to. #### opts - **opts** (`ScrollToIndexOpts`) - Optional configuration for scrolling behavior. ### Returns - `void` ``` ```APIDOC ## scrollTo() ### Description Scrolls the virtualized list to a specific pixel offset from the start. ### Parameters #### offset - **offset** (`number`) - The target offset in pixels from the start. ### Returns - `void` ``` ```APIDOC ## scrollBy() ### Description Scrolls the virtualized list by a specified pixel offset relative to the current scroll position. ### Parameters #### offset - **offset** (`number`) - The amount to scroll in pixels from the current position. ### Returns - `void` ``` -------------------------------- ### Methods Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VListHandle.md Methods available on the VListHandle interface for controlling and querying the virtualized list. ```APIDOC ## Methods ### findItemIndex() > **findItemIndex**(`offset`): `number` Find nearest item index from offset. #### Parameters ##### offset `number` offset in pixels from the start of the scroll container #### Returns `number` ### getItemOffset() > **getItemOffset**(`index`): `number` Get item offset from start. #### Parameters ##### index `number` index of item #### Returns `number` ### getItemSize() > **getItemSize**(`index`): `number` Get item size. #### Parameters ##### index `number` index of item #### Returns `number` ### scrollToIndex() > **scrollToIndex**(`index`, `opts?`): `void` Scroll to the item specified by index. #### Parameters ##### index `number` index of item ##### opts? [`ScrollToIndexOpts`](../../react/interfaces/ScrollToIndexOpts.md) options #### Returns `void` ### scrollTo() > **scrollTo**(`offset`): `void` Scroll to the given offset. #### Parameters ##### offset `number` offset from start #### Returns `void` ### scrollBy() > **scrollBy**(`offset`): `void` Scroll by the given offset. #### Parameters ##### offset `number` offset from current position #### Returns `void` ``` -------------------------------- ### getItemOffset() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VListHandle.md Retrieves the starting pixel offset of a specific item from the beginning of the scrollable area. ```APIDOC ## getItemOffset(index) ### Description Get item offset from start. ### Parameters #### index - `index` (number) - index of item ### Returns - `number` - The pixel offset of the item. ### Inherited from - `VirtualizerHandle.getItemOffset` ``` -------------------------------- ### Properties Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VListHandle.md Properties available on the VListHandle interface for accessing virtualizer state. ```APIDOC ## Properties ### getCache > **getCache**: () => `CacheSnapshot` Get current [CacheSnapshot](../../react/interfaces/CacheSnapshot.md). #### Returns `CacheSnapshot` ### getScrollOffset > **getScrollOffset**: () => `number` Get current scrollTop, or scrollLeft if horizontal: true. #### Returns `number` ### getScrollSize > **getScrollSize**: () => `number` Get current scrollHeight, or scrollWidth if horizontal: true. #### Returns `number` ### getViewportSize > **getViewportSize**: () => `number` Get current offsetHeight, or offsetWidth if horizontal: true. #### Returns `number` ``` -------------------------------- ### experimental_VGrid Source: https://github.com/inokawa/virtua/blob/main/docs/react/API.md The experimental_VGrid component is an experimental component for virtualized grid layouts. Use with caution as it is under active development. ```APIDOC ## experimental_VGrid ### Description An experimental component for creating virtualized grid layouts. ### Usage ```jsx ``` ### Props Refer to the `VGridProps` interface for a complete list of available props. ``` -------------------------------- ### findItemIndex() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/WindowVirtualizerHandle.md Finds the nearest item index based on a given pixel offset from the start of the scroll container. ```APIDOC ## findItemIndex() ### Description Find nearest item index from offset. ### Parameters #### offset - **offset** (number) - offset in pixels from the start of the scroll container ### Returns - **number** - The nearest item index. ``` -------------------------------- ### findItemIndex() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md Finds the nearest item index based on a given pixel offset from the start of the scroll container. ```APIDOC ## findItemIndex() ### Description Find nearest item index from offset. ### Parameters #### offset - **offset** (number) - offset in pixels from the start of the scroll container ### Returns - `number` - The nearest item index. ``` -------------------------------- ### getItemOffset Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListHandle.md Retrieves the pixel offset of a specific item from the start of the scrollable area. This method is inherited from VirtualizerHandle. ```APIDOC ## getItemOffset() ### Description Get item offset from start. ### Parameters #### index - **index** (number) - index of item ### Returns - `number` - The offset of the item in pixels. ### Inherited from - `VirtualizerHandle.getItemOffset` ``` -------------------------------- ### startMargin Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerProps.md The offset to the scrollable parent in pixels. If an element is placed before the virtualizer, its height should be set using this prop. ```APIDOC ## startMargin ### Description The offset to the scrollable parent before virtualizer in pixels. If you put an element before virtualizer, you have to set its height to this prop. ### Type `number` ### Optional `true` ``` -------------------------------- ### VirtualizerHandle Properties Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/VirtualizerHandle.md This section details the readable properties available on the VirtualizerHandle interface for inspecting the current state of the virtualized list. ```APIDOC ## cache ### Description Provides a snapshot of the current caching state for the virtualized list. ### Type [`CacheSnapshot`](../../react/interfaces/CacheSnapshot.md) ``` ```APIDOC ## scrollOffset ### Description Represents the current scroll position. This will be the `scrollTop` for vertical scrolling or `scrollLeft` for horizontal scrolling. ### Type `number` ``` ```APIDOC ## scrollSize ### Description Indicates the total scrollable size of the container. This is the `scrollWidth` for horizontal scrolling or `scrollHeight` for vertical scrolling. ### Type `number` ``` ```APIDOC ## viewportSize ### Description Represents the visible size of the viewport. This is the `offsetWidth` for horizontal scrolling or `offsetHeight` for vertical scrolling. ### Type `number` ``` -------------------------------- ### findItemIndex(offset) Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md Finds the index of the nearest item based on a given pixel offset from the start of the scroll container. ```APIDOC ## findItemIndex(offset) ### Description Find nearest item index from offset. ### Parameters #### offset - `offset` (number) - offset in pixels from the start of the scroll container ### Returns - `number` - The index of the nearest item. ``` -------------------------------- ### getItemSize Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListHandle.md Gets the size (height or width, depending on orientation) of a specific item in the virtualized list. This method is inherited from VirtualizerHandle. ```APIDOC ## getItemSize() ### Description Get item size. ### Parameters #### index - **index** (number) - index of item ### Returns - `number` - The size of the item. ### Inherited from - `VirtualizerHandle.getItemSize` ``` -------------------------------- ### WindowVirtualizer() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/functions/WindowVirtualizer.md The WindowVirtualizer function creates a virtualizer instance controlled by the window's scrolling. It accepts props that define its behavior and returns a React element. ```APIDOC ## WindowVirtualizer() ### Description Creates a virtualizer instance controlled by the window scrolling. This function is a wrapper around the base `Virtualizer` component, providing window-specific scroll handling. ### Signature `WindowVirtualizer(props: WindowVirtualizerProps): Element` ### Parameters - **props** (`WindowVirtualizerProps`) - Required - An object containing the configuration for the window virtualizer. This includes properties for data, item rendering, and scroll behavior. See the [WindowVirtualizerProps](../interfaces/WindowVirtualizerProps.md) interface for details. ### Returns - `Element` - A React element that renders the virtualized content. ``` -------------------------------- ### ScrollToIndexAlign Source: https://github.com/inokawa/virtua/blob/main/docs/react/type-aliases/ScrollToIndexAlign.md Defines the alignment options for scrolling to an item within a virtualized list. The possible values are 'start', 'center', 'end', or 'nearest'. ```APIDOC ## Type Alias: ScrollToIndexAlign > **ScrollToIndexAlign** = `"start"` | `"center"` | `"end"` | `"nearest"` Defined in: [src/core/types.ts:19](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/core/types.ts#L19) ``` -------------------------------- ### VList() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/functions/VList.md Virtualized list component. See VListProps and VListHandle. ```APIDOC ## VList() ### Description Virtualized list component. See [VListProps](../interfaces/VListProps.md) and [VListHandle](../interfaces/VListHandle.md). ### Signature `VList(props: VListProps): Element` ### Parameters #### props - `props` (VListProps) - Description of the props object for VList. ### Returns - `Element` - The rendered virtualized list element. ``` -------------------------------- ### Lazy Element Creation with Render Props Source: https://github.com/inokawa/virtua/blob/main/README.md Employ render props with memoization to lazily create elements, reducing startup costs for a large number of items. This approach can disable optimizations related to cached element instances, so memoizing the render function or component is recommended. ```tsx // memoize render function with some memoization library import memoize from "memoize"; const renderItem = memoize((item: Data) => { return ; }); {renderItem} ; ``` ```tsx // memoize component with React.memo import { memo } from "react"; const Component = memo(HeavyItem); {(item) => { return ; }} ; ``` -------------------------------- ### findItemIndex Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListHandle.md Finds the nearest item index based on a given pixel offset from the start of the scroll container. This method is inherited from VirtualizerHandle. ```APIDOC ## findItemIndex() ### Description Find nearest item index from offset. ### Parameters #### offset - **offset** (number) - offset in pixels from the start of the scroll container ### Returns - `number` - The index of the nearest item. ### Inherited from - `VirtualizerHandle.findItemIndex` ``` -------------------------------- ### cache Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerHandle.md Provides a read-only snapshot of the current caching state of the virtualizer. ```APIDOC ## cache ### Description Get current [CacheSnapshot](../../react/interfaces/CacheSnapshot.md). ### Type `readonly CacheSnapshot` ``` -------------------------------- ### cache Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md Provides a read-only snapshot of the current caching state of the virtualizer. ```APIDOC ## cache ### Description Get current [CacheSnapshot](../../react/interfaces/CacheSnapshot.md). ### Type - `readonly` CacheSnapshot ``` -------------------------------- ### cache Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VListHandle.md Provides a snapshot of the current caching state for the virtualized list. ```APIDOC ## cache ### Description Get current [CacheSnapshot](../../react/interfaces/CacheSnapshot.md). ### Type - `readonly CacheSnapshot` ### Inherited from - `VirtualizerHandle.cache` ``` -------------------------------- ### experimental_VGrid Source: https://github.com/inokawa/virtua/blob/main/docs/react/variables/experimental_VGrid.md Virtualized grid component. See VGridProps and VGridHandle. ```APIDOC ## experimental_VGrid ### Description Virtualized grid component. See [VGridProps](../interfaces/VGridProps.md) and [VGridHandle](../interfaces/VGridHandle.md). ### Type `const experimental_VGrid: ForwardRefExoticComponent>` ``` -------------------------------- ### VirtualizerProps Interface Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerProps.md Props for the Virtualizer component. ```APIDOC ## Interface: VirtualizerProps ### Type Parameters * **T**: The type of the data items. ### Properties * **ref?** (`optional`): (`handle?`) => `void` Get reference to [VirtualizerHandle](VirtualizerHandle.md). * **handle?**: [`VirtualizerHandle`](VirtualizerHandle.md) * **data**: readonly `T`[] The data items rendered by this component. * **children**: (`data`, `index`) => `Element` The elements renderer function. * **data**: `T` * **index**: `Accessor`<`number`> * **bufferSize?** (`optional`): `number` Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling. * **Default Value**: `200` * **as?** (`optional`): `ValidComponent` Component or element type for container element. * **Default Value**: `"div"` * **item?** (`optional`): `ValidComponent` Component or element type for item element. * **Default Value**: `"div"` * **scrollRef?** (`optional`): `HTMLElement` Reference to the scrollable element. The default will get the direct parent element of virtualizer. * **itemSize?** (`optional`): `number` Item size hint for unmeasured items in pixels. It will help to reduce scroll jump when items are measured if used properly. * If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases. * If set, you can opt out estimation and use the value as initial item size. * **shift?** (`optional`): `boolean` While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling. * **horizontal?** (`optional`): `boolean` If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list. * **keepMounted?** (`optional`): readonly `number`[] List of indexes that should be always mounted, even when off screen. * **cache?** (`optional`): [`CacheSnapshot`](../../react/interfaces/CacheSnapshot.md) You can restore cache by passing a [CacheSnapshot](../../react/interfaces/CacheSnapshot.md) on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from [VirtualizerHandle.cache](VListHandle.md#cache). * **The length of items should be the same as when you take the snapshot, otherwise restoration may not work as expected.** ``` -------------------------------- ### item Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VirtualizerProps.md Specifies the component or element type used for rendering each item within the virtualizer. It accepts a component, element type, or a key of intrinsic elements. This component receives CustomItemComponentProps. ```APIDOC ## item ### Description Component or element type for item element. This component will get [CustomItemComponentProps](../type-aliases/CustomItemComponentProps.md) as props. ### Type `optional` **item?**: [`CustomItemComponent`](../type-aliases/CustomItemComponent.md) \| keyof IntrinsicElements ### Default Value ```ts "div" ``` ``` -------------------------------- ### scrollToIndex(index, opts?) Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md Scrolls the virtualized list to bring the item at the specified index into view. Optional options can be provided to control the scroll behavior. ```APIDOC ## scrollToIndex(index, opts?) ### Description Scroll to the item specified by index. ### Parameters #### index - `index` (number) - index of item #### opts? - `opts` ([`ScrollToIndexOpts`](../../react/interfaces/ScrollToIndexOpts.md)) - options ### Returns - `void` ``` -------------------------------- ### onVnodeMounted Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md Hook called after the virtualizer's VNode is mounted. ```APIDOC ## onVnodeMounted ### Description Hook called after the virtualizer's VNode is mounted. Can be a single hook or an array of hooks. ### Type `VNodeMountHook` | `VNodeMountHook[]` ### Optional Yes ``` -------------------------------- ### VirtualizerProps Interface Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerProps.md The VirtualizerProps interface defines the configuration options for the Virtualizer component. ```APIDOC ## Interface: VirtualizerProps Props of [Virtualizer](../variables/VList.md). ### Type Parameters ### T `T` ### Properties ### data > **data**: readonly `T`[] The data items rendered by this component. *** ### children > **children**: `Snippet` The elements renderer snippet. *** ### getKey? > `optional` **getKey?**: (`data`, `index`) => `string` | `number` Function that returns the key of an item in the list. It's recommended to specify whenever possible for performance. #### Parameters ##### data `T` ##### index `number` #### Returns `string` | `number` #### Default ```ts defaultGetKey (returns index of item) ``` *** ### as? > `optional` **as?**: keyof SvelteHTMLElements Component or element type for container element. #### Default Value ```ts "div" ``` *** ### item? > `optional` **item?**: keyof SvelteHTMLElements Component or element type for item element. #### Default Value ```ts "div" ``` *** ### bufferSize? > `optional` **bufferSize?**: `number` Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling. #### Default Value ```ts 200 ``` *** ### scrollRef? > `optional` **scrollRef?**: `HTMLElement` Reference to the scrollable element. The default will get the direct parent element of virtualizer. *** ### itemSize? > `optional` **itemSize?**: `number` Item size hint for unmeasured items in pixels. It will help to reduce scroll jump when items are measured if used properly. - If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases. - If set, you can opt out estimation and use the value as initial item size. *** ### ssrCount? > `optional` **ssrCount?**: `number` A prop for SSR. If set, the specified amount of items will be mounted in the initial rendering regardless of the container size until hydrated. The minimum value is 0. *** ### shift? > `optional` **shift?**: `boolean` While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling. *** ### horizontal? > `optional` **horizontal?**: `boolean` If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list. *** ### keepMounted? > `optional` **keepMounted?**: readonly `number`[] List of indexes that should be always mounted, even when off screen. *** ``` -------------------------------- ### scrollToIndex() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/WindowVirtualizerHandle.md Scrolls the virtualized window to bring a specific item into view. ```APIDOC ## scrollToIndex() ### Description Scroll to the item specified by index. ### Parameters #### index - **index** (number) - index of item #### opts - **opts** (ScrollToIndexOpts) - options ### Returns - **void** ``` -------------------------------- ### scrollToIndex() Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/WindowVirtualizerHandle.md Scrolls the virtualized window to bring a specific item into view. ```APIDOC ## scrollToIndex() ### Description Scroll to the item specified by index. ### Parameters #### index - **index** (number) - index of item #### opts - **opts** (ScrollToIndexOpts) - Optional configuration for scrolling. ### Returns - **void** ``` -------------------------------- ### cache Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/VirtualizerProps.md Allows restoring the scroll position by providing a cache snapshot. The snapshot should be obtained from `VirtualizerHandle.cache`. Ensure the item length matches the snapshot for expected behavior. ```APIDOC ## cache ### Description Restores the scroll position using a provided cache snapshot. ### Type `CacheSnapshot` (optional) ### Details The `CacheSnapshot` object can be obtained from `VirtualizerHandle.cache`. It's crucial that the length of items matches the snapshot's length for successful restoration. This is particularly useful for maintaining scroll position across navigation events. ``` -------------------------------- ### cache Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerProps.md Optional cache snapshot to restore scroll position. The snapshot can be obtained from `VirtualizerHandle.getCache`. Ensure the item count matches the snapshot for expected behavior. ```APIDOC ## cache? ### Description Optional cache snapshot to restore scroll position. The snapshot can be obtained from `VirtualizerHandle.getCache`. Ensure the item count matches the snapshot for expected behavior. ### Type [`CacheSnapshot`](../../react/interfaces/CacheSnapshot.md) ``` -------------------------------- ### onVnodeBeforeUnmount Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md Hook called before the virtualizer's VNode is unmounted. ```APIDOC ## onVnodeBeforeUnmount ### Description Hook called before the virtualizer's VNode is unmounted. Can be a single hook or an array of hooks. ### Type `VNodeMountHook` | `VNodeMountHook[]` ### Optional Yes ``` -------------------------------- ### VirtualizerProps Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/VirtualizerProps.md Props for the Virtualizer component. ```APIDOC ## Interface: VirtualizerProps Defined in: [src/vue/Virtualizer.tsx:35](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L35) Props of [Virtualizer](../variables/Virtualizer.md). Extends: - `PublicProps` Type Parameters: ### T `T` = `unknown` ## Properties ### data > **data**: `T`[] Defined in: [src/vue/Virtualizer.tsx:39](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L39) The data items rendered by this component. *** ### bufferSize? > `optional` **bufferSize?**: `number` Defined in: [src/vue/Virtualizer.tsx:44](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L44) Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling. #### Default Value ```ts 200 ``` *** ### itemSize? > `optional` **itemSize?**: `number` Defined in: [src/vue/Virtualizer.tsx:51](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L51) Item size hint for unmeasured items in pixels. It will help to reduce scroll jump when items are measured if used properly. - If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases. - If set, you can opt out estimation and use the value as initial item size. *** ### shift? > `optional` **shift?**: `boolean` Defined in: [src/vue/Virtualizer.tsx:55](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L55) While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling. *** ### horizontal? > `optional` **horizontal?**: `boolean` Defined in: [src/vue/Virtualizer.tsx:59](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L59) If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list. *** ### startMargin? > `optional` **startMargin?**: `number` Defined in: [src/vue/Virtualizer.tsx:63](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L63) The offset to the scrollable parent before virtualizer in pixels. If you put an element before virtualizer, you have to set its height to this prop. *** ### ssrCount? > `optional` **ssrCount?**: `number` Defined in: [src/vue/Virtualizer.tsx:67](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L67) A prop for SSR. If set, the specified amount of items will be mounted in the initial rendering regardless of the container size until hydrated. The minimum value is 0. *** ### scrollRef? > `optional` **scrollRef?**: `HTMLElement` Defined in: [src/vue/Virtualizer.tsx:71](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L71) Reference to the scrollable element. The default will get the direct parent element of virtualizer. *** ### as? > `optional` **as?**: keyof IntrinsicElementAttributes Defined in: [src/vue/Virtualizer.tsx:76](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L76) Component or element type for container element. #### Default Value ```ts "div" ``` *** ### item? > `optional` **item?**: keyof IntrinsicElementAttributes Defined in: [src/vue/Virtualizer.tsx:81](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L81) Component or element type for item element. #### Default Value ```ts "div" ``` *** ### itemProps? > `optional` **itemProps?**: `ItemProps` Defined in: [src/vue/Virtualizer.tsx:87](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L87) A function that provides properties/attributes for item element **This prop will be merged into `item` prop in the future** *** ### keepMounted? > `optional` **keepMounted?**: readonly `number`[] Defined in: [src/vue/Virtualizer.tsx:91](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L91) List of indexes that should be always mounted, even when off screen. ``` -------------------------------- ### getItemSize(index) Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md Retrieves the calculated size (height or width) of a specific item in the virtualized list. ```APIDOC ## getItemSize(index) ### Description Get item size. ### Parameters #### index - `index` (number) - index of item ### Returns - `number` - The size of the item. ``` -------------------------------- ### getItemSize() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md Retrieves the size (height or width) of a specific item in the virtualized list. ```APIDOC ## getItemSize() ### Description Get item size. ### Parameters #### index - **index** (number) - index of item ### Returns - `number` - The size of the item in pixels. ``` -------------------------------- ### onVnodeBeforeUpdate Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md Hook called before the virtualizer's VNode is updated. ```APIDOC ## onVnodeBeforeUpdate ### Description Hook called before the virtualizer's VNode is updated. Can be a single hook or an array of hooks. ### Type `VNodeUpdateHook` | `VNodeUpdateHook[]` ### Optional Yes ``` -------------------------------- ### scrollToIndex() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VListHandle.md Scrolls the virtualized list to make a specific item visible. ```APIDOC ## scrollToIndex(index, opts?) ### Description Scroll to the item specified by index. ### Parameters #### index - `index` (number) - index of item #### opts? - `opts` (ScrollToIndexOpts) - options ### Returns - `void` ### Inherited from - `VirtualizerHandle.scrollToIndex` ``` -------------------------------- ### scrollToIndex() Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md Scrolls the virtualized list to bring a specific item into view. ```APIDOC ## scrollToIndex() ### Description Scroll to the item specified by index. ### Parameters #### index - **index** (number) - index of item #### opts? - **opts** (ScrollToIndexOpts) - options for scrolling ### Returns - `void` ``` -------------------------------- ### onScroll Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/WindowVirtualizerProps.md A callback function that is invoked whenever the scroll offset of the virtualized window changes. It does not receive any arguments and returns void. ```APIDOC ## onScroll ### Description Callback invoked whenever scroll offset changes. ### Type `optional` **onScroll?**: () => `void` ### Defined in `src/react/WindowVirtualizer.tsx:130` ``` -------------------------------- ### WindowVirtualizerProps Interface Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/WindowVirtualizerProps.md Defines the properties that can be passed to the WindowVirtualizer component. ```APIDOC ## Interface: WindowVirtualizerProps ### Type Parameters * **T**: The type of data items. ### Properties * **ref?**: (`handle?`) => `void` * Optional. Gets a reference to the `WindowVirtualizerHandle`. * **Parameters**: * **handle?**: [`WindowVirtualizerHandle`](WindowVirtualizerHandle.md) * **Returns**: `void` * **data**: readonly `T`[] * Required. The data items to be rendered by the component. * **children**: (`data`, `index`) => `Element` * Required. A function that renders each item. * **Parameters**: * **data**: `T` - The data for the current item. * **index**: `Accessor`<`number`> - An accessor for the current item's index. * **Returns**: `Element` * **bufferSize?**: `number` * Optional. Extra item space in pixels to render before/after the viewport. Minimum value is 0. Lower values improve performance but might show blank items during fast scrolling. * **Default Value**: `200` * **itemSize?**: `number` * Optional. Item size hint in pixels for unmeasured items. Helps reduce scroll jumps when items are measured. If not set, initial sizes are estimated from measured sizes (recommended). If set, you can opt out of estimation. * **shift?**: `boolean` * Optional. If true, scroll position is maintained from the end (not the start) when items are added/removed from the beginning. Recommended to set to `false` if modifying the list from the middle/end to avoid unexpected behavior. Useful for reverse infinite scrolling. * **horizontal?**: `boolean` * Optional. If true, renders a horizontally scrollable list. Otherwise, renders a vertically scrollable list. * **cache?**: [`CacheSnapshot`](../../react/interfaces/CacheSnapshot.md) * Optional. Pass a `CacheSnapshot` on mount to restore the cache (e.g., scroll position after navigation). The snapshot can be obtained from `WindowVirtualizerHandle.cache`. **Note**: The length of items should match the snapshot's length for expected restoration. * **onScroll?**: () => `void` * Optional. Callback invoked whenever the scroll offset changes. * **Returns**: `void` * **onScrollEnd?**: () => `void` * Optional. Callback invoked when scrolling stops. * **Returns**: `void` ```