Skip to content

Commit

Permalink
Name changes
Browse files Browse the repository at this point in the history
  • Loading branch information
tannerlinsley committed Jun 2, 2022
1 parent 4f38da4 commit 5f0dfe9
Show file tree
Hide file tree
Showing 20 changed files with 692 additions and 349 deletions.
34 changes: 34 additions & 0 deletions docs/adapters/react-virtual.md
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.
36 changes: 36 additions & 0 deletions docs/adapters/solid-virtual.md
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.
36 changes: 36 additions & 0 deletions docs/adapters/svelte-virtual.md
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.
36 changes: 36 additions & 0 deletions docs/adapters/vue-virtual.md
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.
121 changes: 0 additions & 121 deletions docs/api.md

This file was deleted.

66 changes: 66 additions & 0 deletions docs/api/virtual-item.md
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()`.
Loading

0 comments on commit 5f0dfe9

Please sign in to comment.