-
-
Notifications
You must be signed in to change notification settings - Fork 303
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4f38da4
commit 5f0dfe9
Showing
20 changed files
with
692 additions
and
349 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
--- | ||
title: React Virtual | ||
--- | ||
|
||
The `@tanstack/react-virtual` adapter is a wrapper around the core virtual logic. | ||
|
||
## `useVirtualizer` | ||
|
||
```tsx | ||
function useVirtualizer<TScrollElement, TItemElement = unknown>( | ||
options: PartialKeys< | ||
VirtualizerOptions<TScrollElement, TItemElement>, | ||
'observeElementRect' | 'observeElementOffset' | 'scrollToFn' | ||
>, | ||
): Virtualizer<TScrollElement, TItemElement> | ||
``` | ||
|
||
This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. | ||
|
||
## `useWindowVirtualizer` | ||
|
||
```tsx | ||
function useWindowVirtualizer<TItemElement = unknown>( | ||
options: PartialKeys< | ||
VirtualizerOptions<Window, TItemElement>, | ||
| 'getScrollElement' | ||
| 'observeElementRect' | ||
| 'observeElementOffset' | ||
| 'scrollToFn' | ||
>, | ||
): Virtualizer<Window, TItemElement> | ||
``` | ||
|
||
This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
--- | ||
title: Solid Virtual (Coming Soon) | ||
--- | ||
|
||
> ⚠️ This module has not yet been developed. It requires an adapter similiar to `@tanstack/react-virtual` to work. We estimate the amount of code to do this is very minimal, but does require familiarity with the Solid framework. If you would like to contribute this adapter, please open a PR! | ||
The `@tanstack/solid-virtual` adapter is a wrapper around the core virtual logic. | ||
|
||
## `createVirtualizer` | ||
|
||
```tsx | ||
function createVirtualizer<TScrollElement, TItemElement = unknown>( | ||
options: PartialKeys< | ||
VirtualizerOptions<TScrollElement, TItemElement>, | ||
'observeElementRect' | 'observeElementOffset' | 'scrollToFn' | ||
>, | ||
): Virtualizer<TScrollElement, TItemElement> | ||
``` | ||
|
||
This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. | ||
|
||
## `createWindowVirtualizer` | ||
|
||
```tsx | ||
function createWindowVirtualizer<TItemElement = unknown>( | ||
options: PartialKeys< | ||
VirtualizerOptions<Window, TItemElement>, | ||
| 'getScrollElement' | ||
| 'observeElementRect' | ||
| 'observeElementOffset' | ||
| 'scrollToFn' | ||
>, | ||
): Virtualizer<Window, TItemElement> | ||
``` | ||
|
||
This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
--- | ||
title: Svelte Virtual (Coming Soon) | ||
--- | ||
|
||
> ⚠️ This module has not yet been developed. It requires an adapter similiar to `@tanstack/react-virtual` to work. We estimate the amount of code to do this is very minimal, but does require familiarity with the Svelte framework. If you would like to contribute this adapter, please open a PR! | ||
The `@tanstack/svelte-virtual` adapter is a wrapper around the core virtual logic. | ||
|
||
## `createVirtualizer` | ||
|
||
```tsx | ||
function createVirtualizer<TScrollElement, TItemElement = unknown>( | ||
options: PartialKeys< | ||
VirtualizerOptions<TScrollElement, TItemElement>, | ||
'observeElementRect' | 'observeElementOffset' | 'scrollToFn' | ||
>, | ||
): Virtualizer<TScrollElement, TItemElement> | ||
``` | ||
|
||
This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. | ||
|
||
## `createWindowVirtualizer` | ||
|
||
```tsx | ||
function createWindowVirtualizer<TItemElement = unknown>( | ||
options: PartialKeys< | ||
VirtualizerOptions<Window, TItemElement>, | ||
| 'getScrollElement' | ||
| 'observeElementRect' | ||
| 'observeElementOffset' | ||
| 'scrollToFn' | ||
>, | ||
): Virtualizer<Window, TItemElement> | ||
``` | ||
|
||
This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
--- | ||
title: Vue Virtual (Coming Soon) | ||
--- | ||
|
||
> ⚠️ This module has not yet been developed. It requires an adapter similiar to `@tanstack/react-virtual` to work. We estimate the amount of code to do this is very minimal, but does require familiarity with the Vue framework. If you would like to contribute this adapter, please open a PR! | ||
The `@tanstack/vue-virtual` adapter is a wrapper around the core virtual logic. | ||
|
||
## `useVirtualizer` | ||
|
||
```tsx | ||
function useVirtualizer<TScrollElement, TItemElement = unknown>( | ||
options: PartialKeys< | ||
VirtualizerOptions<TScrollElement, TItemElement>, | ||
'observeElementRect' | 'observeElementOffset' | 'scrollToFn' | ||
>, | ||
): Virtualizer<TScrollElement, TItemElement> | ||
``` | ||
|
||
This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. | ||
|
||
## `useWindowVirtualizer` | ||
|
||
```tsx | ||
function useWindowVirtualizer<TItemElement = unknown>( | ||
options: PartialKeys< | ||
VirtualizerOptions<Window, TItemElement>, | ||
| 'getScrollElement' | ||
| 'observeElementRect' | ||
| 'observeElementOffset' | ||
| 'scrollToFn' | ||
>, | ||
): Virtualizer<Window, TItemElement> | ||
``` | ||
|
||
This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement. |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
--- | ||
title: VirtualItem | ||
--- | ||
|
||
The `VirtualItem` object represents a single item returned by the virtualizer. It contains information you need to render the item in the cooredinate space within your virtualizer's scrollElement and other helpful properties/functions. | ||
|
||
```tsx | ||
export interface VirtualItem<TItemElement = unknown> { | ||
key: string | number | ||
index: number | ||
start: number | ||
end: number | ||
size: number | ||
measureElement: (el: TItemElement | null) => void | ||
} | ||
``` | ||
|
||
The following properties and methods are available on each VirtualItem object: | ||
|
||
### `key` | ||
|
||
```tsx | ||
key: string | number | ||
``` | ||
|
||
The unique key for the item. By default this is the item index, but should be configured via the `getItemKey` Virtualizer option. | ||
|
||
### `index` | ||
|
||
```tsx | ||
index: number | ||
``` | ||
|
||
The index of the item. | ||
|
||
### `start` | ||
|
||
```tsx | ||
start: number | ||
``` | ||
|
||
The starting pixel offset for the item. This is usually mapped to a css property or transform like `top/left` or `translateX/translateY`. | ||
|
||
### `end` | ||
|
||
```tsx | ||
end: number | ||
``` | ||
|
||
The ending pixel offset for the item. This value is not necessary for most layouts, but can be helpful so we've provided it anyway. | ||
|
||
### `size` | ||
|
||
```tsx | ||
size: number | ||
``` | ||
|
||
The size of the item. This is usually mapped to a css property like `width/height`. Before an item is measured vit the `VirtualItem.measureElement` method, this will be the estimated size returned from your `estimateSize` virtualizer option. After an item is measured (if you choose to measure it at all), this value will be the number returned by your `measureElement` virtualizer option (which by default is configured to measure elements with `getBoundingClientRect()`). | ||
|
||
### `measureElement` | ||
|
||
```tsx | ||
measureElement: (el: TItemElement | null) => void | ||
``` | ||
|
||
Measures the element using your configured `measureElement` virtualizer option. You are repsonsible for calling this in your virtualizer markup when the component is rendered (eg. using something like React's ref callback prop). By default the `measureElement` virtualizer option is configured to measure elements with `getBoundingClientRect()`. |
Oops, something went wrong.