From b217006988d5e961139c79e76120aea20f7d2721 Mon Sep 17 00:00:00 2001 From: inokawa <48897392+inokawa@users.noreply.github.com> Date: Sun, 7 Jan 2024 21:06:19 +0900 Subject: [PATCH] 0.20.0 --- docs/classes/vue.VList.md | 54 +- docs/interfaces/react.CacheSnapshot.md | 2 +- .../react.CustomCellComponentProps.md | 4 +- .../react.CustomContainerComponentProps.md | 30 + .../react.CustomItemComponentProps.md | 8 +- .../react.CustomViewportComponentProps.md | 75 - docs/interfaces/react.ScrollToIndexOpts.md | 4 +- docs/interfaces/react.VGridHandle.md | 12 +- docs/interfaces/react.VGridProps.md | 30 +- docs/interfaces/react.VListHandle.md | 48 +- docs/interfaces/react.VListProps.md | 201 ++- docs/interfaces/react.VirtualizerHandle.md | 141 ++ docs/interfaces/react.VirtualizerProps.md | 291 ++++ docs/interfaces/react.WVListHandle.md | 23 - docs/interfaces/react.WVListProps.md | 1326 ----------------- .../react.WindowVirtualizerHandle.md | 23 + .../react.WindowVirtualizerProps.md | 212 +++ docs/modules/react.md | 67 +- package-lock.json | 4 +- package.json | 2 +- 20 files changed, 971 insertions(+), 1586 deletions(-) create mode 100644 docs/interfaces/react.CustomContainerComponentProps.md delete mode 100644 docs/interfaces/react.CustomViewportComponentProps.md create mode 100644 docs/interfaces/react.VirtualizerHandle.md create mode 100644 docs/interfaces/react.VirtualizerProps.md delete mode 100644 docs/interfaces/react.WVListHandle.md delete mode 100644 docs/interfaces/react.WVListProps.md create mode 100644 docs/interfaces/react.WindowVirtualizerHandle.md create mode 100644 docs/interfaces/react.WindowVirtualizerProps.md diff --git a/docs/classes/vue.VList.md b/docs/classes/vue.VList.md index 77de8f984..b3cc67ba8 100644 --- a/docs/classes/vue.VList.md +++ b/docs/classes/vue.VList.md @@ -26,13 +26,13 @@ - [$options](vue.VList.md#$options) - [$forceUpdate](vue.VList.md#$forceupdate) - [$nextTick](vue.VList.md#$nexttick) -- [shift](vue.VList.md#shift) - [onScroll](vue.VList.md#onscroll) +- [shift](vue.VList.md#shift) - [data](vue.VList.md#data) - [overscan](vue.VList.md#overscan) -- [initialItemSize](vue.VList.md#initialitemsize) +- [itemSize](vue.VList.md#itemsize) - [horizontal](vue.VList.md#horizontal) -- [onScrollStop](vue.VList.md#onscrollstop) +- [onScrollEnd](vue.VList.md#onscrollend) - [onRangeChange](vue.VList.md#onrangechange) - [scrollOffset](vue.VList.md#scrolloffset) - [scrollSize](vue.VList.md#scrollsize) @@ -87,7 +87,7 @@ Scroll to the item specified by index. #### Defined in -[src/vue/VList.tsx:49](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L49) +[src/vue/VList.tsx:51](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L51) ___ @@ -109,7 +109,7 @@ Scroll to the given offset. #### Defined in -[src/vue/VList.tsx:54](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L54) +[src/vue/VList.tsx:56](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L56) ___ @@ -131,7 +131,7 @@ Scroll by the given offset. #### Defined in -[src/vue/VList.tsx:59](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L59) +[src/vue/VList.tsx:61](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L61) ## Properties @@ -157,7 +157,7 @@ ___ ### $props -• **$props**: `Partial`\<\{ `shift`: `boolean` = Boolean; `overscan`: `number` ; `horizontal`: `boolean` = Boolean }\> & `Omit`\<\{ `shift`: `boolean` = Boolean; `data`: `unknown`[] ; `overscan`: `number` ; `horizontal`: `boolean` = Boolean; `initialItemSize?`: `number` = Number; `onScroll`: `undefined` \| (...`args`: [offset: number]) => `any` ; `onScrollStop`: `undefined` \| (...`args`: []) => `any` ; `onRangeChange`: `undefined` \| (...`args`: [startIndex: number, endIndex: number]) => `any` } & `VNodeProps` & `AllowedComponentProps` & `ComponentCustomProps` & `Readonly`\<`ExtractPropTypes`\<\{ `data`: \{ `type`: `ArrayConstructor` = Array; `required`: ``true`` = true } ; `overscan`: \{ `type`: `NumberConstructor` = Number; `default`: `number` = 4 } ; `initialItemSize`: `NumberConstructor` = Number; `shift`: `BooleanConstructor` = Boolean; `horizontal`: `BooleanConstructor` = Boolean }\>\> & \{ `onScroll`: `undefined` \| (...`args`: [offset: number]) => `any` ; `onScrollStop`: `undefined` \| (...`args`: []) => `any` ; `onRangeChange`: `undefined` \| (...`args`: [startIndex: number, endIndex: number]) => `any` }, `DefaultKeys`\<\{ `data`: \{ `type`: `ArrayConstructor` = Array; `required`: ``true`` = true } ; `overscan`: \{ `type`: `NumberConstructor` = Number; `default`: `number` = 4 } ; `initialItemSize`: `NumberConstructor` = Number; `shift`: `BooleanConstructor` = Boolean; `horizontal`: `BooleanConstructor` = Boolean }\>\> +• **$props**: `Partial`\<\{ `shift`: `boolean` = Boolean; `overscan`: `number` ; `horizontal`: `boolean` = Boolean }\> & `Omit`\<\{ `shift`: `boolean` = Boolean; `data`: `unknown`[] ; `overscan`: `number` ; `horizontal`: `boolean` = Boolean; `itemSize?`: `number` = Number; `onScroll`: `undefined` \| (...`args`: [offset: number]) => `any` ; `onScrollEnd`: `undefined` \| (...`args`: []) => `any` ; `onRangeChange`: `undefined` \| (...`args`: [startIndex: number, endIndex: number]) => `any` } & `VNodeProps` & `AllowedComponentProps` & `ComponentCustomProps` & `Readonly`\<`ExtractPropTypes`\<\{ `data`: \{ `type`: `ArrayConstructor` = Array; `required`: ``true`` = true } ; `overscan`: \{ `type`: `NumberConstructor` = Number; `default`: `number` = 4 } ; `itemSize`: `NumberConstructor` = Number; `shift`: `BooleanConstructor` = Boolean; `horizontal`: `BooleanConstructor` = Boolean }\>\> & \{ `onScroll`: `undefined` \| (...`args`: [offset: number]) => `any` ; `onScrollEnd`: `undefined` \| (...`args`: []) => `any` ; `onRangeChange`: `undefined` \| (...`args`: [startIndex: number, endIndex: number]) => `any` }, `DefaultKeys`\<\{ `data`: \{ `type`: `ArrayConstructor` = Array; `required`: ``true`` = true } ; `overscan`: \{ `type`: `NumberConstructor` = Number; `default`: `number` = 4 } ; `itemSize`: `NumberConstructor` = Number; `shift`: `BooleanConstructor` = Boolean; `horizontal`: `BooleanConstructor` = Boolean }\>\> #### Defined in @@ -217,7 +217,7 @@ ___ ### $emit -• **$emit**: (`event`: ``"scroll"``, ...`args`: [offset: number]) => `void` & (`event`: ``"scrollStop"``, ...`args`: []) => `void` & (`event`: ``"rangeChange"``, ...`args`: [startIndex: number, endIndex: number]) => `void` +• **$emit**: (`event`: ``"scroll"``, ...`args`: [offset: number]) => `void` & (`event`: ``"scrollEnd"``, ...`args`: []) => `void` & (`event`: ``"rangeChange"``, ...`args`: [startIndex: number, endIndex: number]) => `void` #### Defined in @@ -237,7 +237,7 @@ ___ ### $options -• **$options**: `ComponentOptionsBase`\<`ResolveProps`\<\{ `data`: \{ `type`: `ArrayConstructor` = Array; `required`: ``true`` = true } ; `overscan`: \{ `type`: `NumberConstructor` = Number; `default`: `number` = 4 } ; `initialItemSize`: `NumberConstructor` = Number; `shift`: `BooleanConstructor` = Boolean; `horizontal`: `BooleanConstructor` = Boolean }, \{ `scroll`: (`offset`: `number`) => `void` ; `scrollStop`: () => `void` ; `rangeChange`: (`startIndex`: `number`, `endIndex`: `number`) => `void` }\>, `VListHandle`, {}, {}, {}, `ComponentOptionsMixin`, `ComponentOptionsMixin`, \{ `scroll`: (`offset`: `number`) => `void` ; `scrollStop`: () => `void` ; `rangeChange`: (`startIndex`: `number`, `endIndex`: `number`) => `void` }, `string`, \{ `shift`: `boolean` = Boolean; `overscan`: `number` ; `horizontal`: `boolean` = Boolean }, {}, `string`, `SlotsType`\<\{ `default`: `any` }\>\> & `MergedComponentOptionsOverride` +• **$options**: `ComponentOptionsBase`\<`ResolveProps`\<\{ `data`: \{ `type`: `ArrayConstructor` = Array; `required`: ``true`` = true } ; `overscan`: \{ `type`: `NumberConstructor` = Number; `default`: `number` = 4 } ; `itemSize`: `NumberConstructor` = Number; `shift`: `BooleanConstructor` = Boolean; `horizontal`: `BooleanConstructor` = Boolean }, \{ `scroll`: (`offset`: `number`) => `void` ; `scrollEnd`: () => `void` ; `rangeChange`: (`startIndex`: `number`, `endIndex`: `number`) => `void` }\>, `VListHandle`, {}, {}, {}, `ComponentOptionsMixin`, `ComponentOptionsMixin`, \{ `scroll`: (`offset`: `number`) => `void` ; `scrollEnd`: () => `void` ; `rangeChange`: (`startIndex`: `number`, `endIndex`: `number`) => `void` }, `string`, \{ `shift`: `boolean` = Boolean; `overscan`: `number` ; `horizontal`: `boolean` = Boolean }, {}, `string`, `SlotsType`\<\{ `default`: `any` }\>\> & `MergedComponentOptionsOverride` #### Defined in @@ -295,6 +295,12 @@ node_modules/@vue/runtime-core/dist/runtime-core.d.ts:130 ___ +### onScroll + +• **onScroll**: `undefined` \| (...`args`: [offset: number]) => `any` + +___ + ### shift • `Readonly` **shift**: `boolean` = `Boolean` @@ -303,13 +309,7 @@ While true is set, scroll position will be maintained from the end not usual sta #### Defined in -[src/vue/VList.tsx:82](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L82) - -___ - -### onScroll - -• **onScroll**: `undefined` \| (...`args`: [offset: number]) => `any` +[src/vue/VList.tsx:84](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L84) ___ @@ -321,7 +321,7 @@ The data items rendered by this component. #### Defined in -[src/vue/VList.tsx:66](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L66) +[src/vue/VList.tsx:68](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L68) ___ @@ -339,13 +339,13 @@ Number of items to render above/below the visible bounds of the list. You can in #### Defined in -[src/vue/VList.tsx:71](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L71) +[src/vue/VList.tsx:73](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L73) ___ -### initialItemSize +### itemSize -• `Optional` `Readonly` **initialItemSize**: `number` = `Number` +• `Optional` `Readonly` **itemSize**: `number` = `Number` Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly. @@ -354,7 +354,7 @@ Item size hint for unmeasured items. It will help to reduce scroll jump when ite #### Defined in -[src/vue/VList.tsx:78](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L78) +[src/vue/VList.tsx:80](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L80) ___ @@ -366,13 +366,13 @@ If true, rendered as a horizontally scrollable list. Otherwise rendered as a ver #### Defined in -[src/vue/VList.tsx:86](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L86) +[src/vue/VList.tsx:88](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L88) ___ -### onScrollStop +### onScrollEnd -• **onScrollStop**: `undefined` \| (...`args`: []) => `any` +• **onScrollEnd**: `undefined` \| (...`args`: []) => `any` ___ @@ -390,7 +390,7 @@ Get current scrollTop or scrollLeft. #### Defined in -[src/vue/VList.tsx:35](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L35) +[src/vue/VList.tsx:37](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L37) ___ @@ -402,7 +402,7 @@ Get current scrollHeight or scrollWidth. #### Defined in -[src/vue/VList.tsx:39](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L39) +[src/vue/VList.tsx:41](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L41) ___ @@ -414,4 +414,4 @@ Get current offsetHeight or offsetWidth. #### Defined in -[src/vue/VList.tsx:43](https://github.com/inokawa/virtua/blob/de57a89c/src/vue/VList.tsx#L43) +[src/vue/VList.tsx:45](https://github.com/inokawa/virtua/blob/facd0683/src/vue/VList.tsx#L45) diff --git a/docs/interfaces/react.CacheSnapshot.md b/docs/interfaces/react.CacheSnapshot.md index 9823a321c..941abee1b 100644 --- a/docs/interfaces/react.CacheSnapshot.md +++ b/docs/interfaces/react.CacheSnapshot.md @@ -20,4 +20,4 @@ Serializable cache snapshot. #### Defined in -[src/core/types.ts:8](https://github.com/inokawa/virtua/blob/de57a89c/src/core/types.ts#L8) +[src/core/types.ts:8](https://github.com/inokawa/virtua/blob/facd0683/src/core/types.ts#L8) diff --git a/docs/interfaces/react.CustomCellComponentProps.md b/docs/interfaces/react.CustomCellComponentProps.md index 88724a028..c3ae43301 100644 --- a/docs/interfaces/react.CustomCellComponentProps.md +++ b/docs/interfaces/react.CustomCellComponentProps.md @@ -19,7 +19,7 @@ Props of customized cell component for [VGrid](../modules/react.md#experimental_ #### Defined in -[src/react/VGrid.tsx:42](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L42) +[src/react/VGrid.tsx:89](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L89) ___ @@ -29,4 +29,4 @@ ___ #### Defined in -[src/react/VGrid.tsx:43](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L43) +[src/react/VGrid.tsx:90](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L90) diff --git a/docs/interfaces/react.CustomContainerComponentProps.md b/docs/interfaces/react.CustomContainerComponentProps.md new file mode 100644 index 000000000..fcbfdd97b --- /dev/null +++ b/docs/interfaces/react.CustomContainerComponentProps.md @@ -0,0 +1,30 @@ +# Interface: CustomContainerComponentProps + +[react](../modules/react.md).CustomContainerComponentProps + +## Table of contents + +### Properties + +- [style](react.CustomContainerComponentProps.md#style) +- [children](react.CustomContainerComponentProps.md#children) + +## Properties + +### style + +• **style**: `CSSProperties` + +#### Defined in + +[src/react/types.ts:10](https://github.com/inokawa/virtua/blob/facd0683/src/react/types.ts#L10) + +___ + +### children + +• **children**: `ReactNode` + +#### Defined in + +[src/react/types.ts:11](https://github.com/inokawa/virtua/blob/facd0683/src/react/types.ts#L11) diff --git a/docs/interfaces/react.CustomItemComponentProps.md b/docs/interfaces/react.CustomItemComponentProps.md index c2dbc001b..7aa2fb11f 100644 --- a/docs/interfaces/react.CustomItemComponentProps.md +++ b/docs/interfaces/react.CustomItemComponentProps.md @@ -2,7 +2,7 @@ [react](../modules/react.md).CustomItemComponentProps -Props of customized item component for [VList](../modules/react.md#vlist). +Props of customized item component for [Virtualizer](../modules/react.md#virtualizer) or [WindowVirtualizer](../modules/react.md#windowvirtualizer). ## Table of contents @@ -20,7 +20,7 @@ Props of customized item component for [VList](../modules/react.md#vlist). #### Defined in -[src/react/ListItem.tsx:18](https://github.com/inokawa/virtua/blob/de57a89c/src/react/ListItem.tsx#L18) +[src/react/ListItem.tsx:18](https://github.com/inokawa/virtua/blob/facd0683/src/react/ListItem.tsx#L18) ___ @@ -30,7 +30,7 @@ ___ #### Defined in -[src/react/ListItem.tsx:19](https://github.com/inokawa/virtua/blob/de57a89c/src/react/ListItem.tsx#L19) +[src/react/ListItem.tsx:19](https://github.com/inokawa/virtua/blob/facd0683/src/react/ListItem.tsx#L19) ___ @@ -40,4 +40,4 @@ ___ #### Defined in -[src/react/ListItem.tsx:20](https://github.com/inokawa/virtua/blob/de57a89c/src/react/ListItem.tsx#L20) +[src/react/ListItem.tsx:20](https://github.com/inokawa/virtua/blob/facd0683/src/react/ListItem.tsx#L20) diff --git a/docs/interfaces/react.CustomViewportComponentProps.md b/docs/interfaces/react.CustomViewportComponentProps.md deleted file mode 100644 index 4c511eb81..000000000 --- a/docs/interfaces/react.CustomViewportComponentProps.md +++ /dev/null @@ -1,75 +0,0 @@ -# Interface: CustomViewportComponentProps - -[react](../modules/react.md).CustomViewportComponentProps - -Props of customized scrollable component. - -## Table of contents - -### Properties - -- [children](react.CustomViewportComponentProps.md#children) -- [attrs](react.CustomViewportComponentProps.md#attrs) -- [height](react.CustomViewportComponentProps.md#height) -- [width](react.CustomViewportComponentProps.md#width) -- [scrolling](react.CustomViewportComponentProps.md#scrolling) - -## Properties - -### children - -• **children**: `ReactNode` - -Renderable item elements. - -#### Defined in - -[src/react/Viewport.tsx:22](https://github.com/inokawa/virtua/blob/de57a89c/src/react/Viewport.tsx#L22) - -___ - -### attrs - -• **attrs**: [`ViewportComponentAttributes`](../modules/react.md#viewportcomponentattributes) - -Attributes that should be passed to the scrollable element. - -#### Defined in - -[src/react/Viewport.tsx:26](https://github.com/inokawa/virtua/blob/de57a89c/src/react/Viewport.tsx#L26) - -___ - -### height - -• **height**: `undefined` \| `number` - -Total height of items. It's undefined if component is not vertically scrollable. - -#### Defined in - -[src/react/Viewport.tsx:30](https://github.com/inokawa/virtua/blob/de57a89c/src/react/Viewport.tsx#L30) - -___ - -### width - -• **width**: `undefined` \| `number` - -Total width of items. It's undefined if component is not horizontally scrollable. - -#### Defined in - -[src/react/Viewport.tsx:34](https://github.com/inokawa/virtua/blob/de57a89c/src/react/Viewport.tsx#L34) - -___ - -### scrolling - -• **scrolling**: `boolean` - -Currently component is scrolling or not. - -#### Defined in - -[src/react/Viewport.tsx:38](https://github.com/inokawa/virtua/blob/de57a89c/src/react/Viewport.tsx#L38) diff --git a/docs/interfaces/react.ScrollToIndexOpts.md b/docs/interfaces/react.ScrollToIndexOpts.md index fdbc98235..68177b815 100644 --- a/docs/interfaces/react.ScrollToIndexOpts.md +++ b/docs/interfaces/react.ScrollToIndexOpts.md @@ -24,7 +24,7 @@ Alignment of item. #### Defined in -[src/core/types.ts:22](https://github.com/inokawa/virtua/blob/de57a89c/src/core/types.ts#L22) +[src/core/types.ts:22](https://github.com/inokawa/virtua/blob/facd0683/src/core/types.ts#L22) ___ @@ -38,4 +38,4 @@ If true, scrolling animates smoothly with [`behavior: smooth` of scrollTo](https #### Defined in -[src/core/types.ts:28](https://github.com/inokawa/virtua/blob/de57a89c/src/core/types.ts#L28) +[src/core/types.ts:28](https://github.com/inokawa/virtua/blob/facd0683/src/core/types.ts#L28) diff --git a/docs/interfaces/react.VGridHandle.md b/docs/interfaces/react.VGridHandle.md index e7aa21fec..702a7aa88 100644 --- a/docs/interfaces/react.VGridHandle.md +++ b/docs/interfaces/react.VGridHandle.md @@ -39,7 +39,7 @@ Scroll to the item specified by index. #### Defined in -[src/react/VGrid.tsx:133](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L133) +[src/react/VGrid.tsx:176](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L176) ___ @@ -62,7 +62,7 @@ Scroll to the given offset. #### Defined in -[src/react/VGrid.tsx:139](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L139) +[src/react/VGrid.tsx:182](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L182) ___ @@ -85,7 +85,7 @@ Scroll by the given offset. #### Defined in -[src/react/VGrid.tsx:145](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L145) +[src/react/VGrid.tsx:188](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L188) ## Properties @@ -97,7 +97,7 @@ Get current scrollTop or scrollLeft. #### Defined in -[src/react/VGrid.tsx:119](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L119) +[src/react/VGrid.tsx:162](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L162) ___ @@ -109,7 +109,7 @@ Get current scrollHeight or scrollWidth. #### Defined in -[src/react/VGrid.tsx:123](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L123) +[src/react/VGrid.tsx:166](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L166) ___ @@ -121,4 +121,4 @@ Get current offsetHeight or offsetWidth. #### Defined in -[src/react/VGrid.tsx:127](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L127) +[src/react/VGrid.tsx:170](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L170) diff --git a/docs/interfaces/react.VGridProps.md b/docs/interfaces/react.VGridProps.md index 3391d1c2b..b5c526892 100644 --- a/docs/interfaces/react.VGridProps.md +++ b/docs/interfaces/react.VGridProps.md @@ -109,7 +109,7 @@ A function to create elements rendered by this component. #### Defined in -[src/react/VGrid.tsx:155](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L155) +[src/react/VGrid.tsx:198](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L198) ___ @@ -121,7 +121,7 @@ Total row length of grid. #### Defined in -[src/react/VGrid.tsx:168](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L168) +[src/react/VGrid.tsx:211](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L211) ___ @@ -133,7 +133,7 @@ Total column length of grid. #### Defined in -[src/react/VGrid.tsx:172](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L172) +[src/react/VGrid.tsx:215](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L215) ___ @@ -151,7 +151,7 @@ Cell height hint for unmeasured items. It's recommended to specify this prop if #### Defined in -[src/react/VGrid.tsx:177](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L177) +[src/react/VGrid.tsx:220](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L220) ___ @@ -169,7 +169,7 @@ Cell width hint for unmeasured items. It's recommended to specify this prop if i #### Defined in -[src/react/VGrid.tsx:182](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L182) +[src/react/VGrid.tsx:225](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L225) ___ @@ -187,7 +187,7 @@ Number of items to render above/below the visible bounds of the grid. Lower valu #### Defined in -[src/react/VGrid.tsx:187](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L187) +[src/react/VGrid.tsx:230](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L230) ___ @@ -199,7 +199,7 @@ If set, the specified amount of rows will be mounted in the initial rendering re #### Defined in -[src/react/VGrid.tsx:191](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L191) +[src/react/VGrid.tsx:234](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L234) ___ @@ -211,7 +211,7 @@ If set, the specified amount of cols will be mounted in the initial rendering re #### Defined in -[src/react/VGrid.tsx:195](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L195) +[src/react/VGrid.tsx:238](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L238) ___ @@ -225,12 +225,12 @@ Customized components for advanced usage. | Name | Type | Description | | :------ | :------ | :------ | -| `Root?` | `ForwardRefExoticComponent`\<[`CustomViewportComponentProps`](react.CustomViewportComponentProps.md) & `RefAttributes`\<`any`\>\> | Component for scrollable element. This component will get [CustomViewportComponentProps](react.CustomViewportComponentProps.md) as props. **`Default Value`** ```ts {@link DefaultViewport} ``` | -| `Cell?` | `CustomCellComponentOrElement` | Component or element type for cell element. This component will get [CustomCellComponentProps](react.CustomCellComponentProps.md) as props. **`Default Value`** ```ts "div" ``` | +| `Root?` | `ForwardRefExoticComponent`\<`CustomViewportComponentProps` & `RefAttributes`\<`any`\>\> | Component for scrollable element. This component will get CustomViewportComponentProps as props. **`Default Value`** ```ts {@link DefaultViewport} ``` | +| `Cell?` | keyof `IntrinsicElements` \| [`CustomCellComponent`](../modules/react.md#customcellcomponent) | Component or element type for cell element. This component will get [CustomCellComponentProps](react.CustomCellComponentProps.md) as props. **`Default Value`** ```ts "div" ``` | #### Defined in -[src/react/VGrid.tsx:199](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L199) +[src/react/VGrid.tsx:242](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L242) ___ @@ -352,7 +352,7 @@ ___ ### aria-autocomplete -• `Optional` **aria-autocomplete**: ``"list"`` \| ``"none"`` \| ``"inline"`` \| ``"both"`` +• `Optional` **aria-autocomplete**: ``"inline"`` \| ``"none"`` \| ``"both"`` \| ``"list"`` Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. @@ -643,7 +643,7 @@ ___ ### aria-dropeffect -• `Optional` **aria-dropeffect**: ``"copy"`` \| ``"link"`` \| ``"none"`` \| ``"move"`` \| ``"execute"`` \| ``"popup"`` +• `Optional` **aria-dropeffect**: ``"copy"`` \| ``"none"`` \| ``"link"`` \| ``"move"`` \| ``"execute"`` \| ``"popup"`` Indicates what functions can be performed when a dragged object is released on the drop target. @@ -737,7 +737,7 @@ ___ ### aria-haspopup -• `Optional` **aria-haspopup**: `boolean` \| ``"dialog"`` \| ``"grid"`` \| ``"listbox"`` \| ``"menu"`` \| ``"tree"`` \| ``"false"`` \| ``"true"`` +• `Optional` **aria-haspopup**: `boolean` \| ``"grid"`` \| ``"dialog"`` \| ``"menu"`` \| ``"listbox"`` \| ``"false"`` \| ``"true"`` \| ``"tree"`` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. @@ -1044,7 +1044,7 @@ ___ ### aria-relevant -• `Optional` **aria-relevant**: ``"all"`` \| ``"text"`` \| ``"additions"`` \| ``"additions removals"`` \| ``"additions text"`` \| ``"removals"`` \| ``"removals additions"`` \| ``"removals text"`` \| ``"text additions"`` \| ``"text removals"`` +• `Optional` **aria-relevant**: ``"text"`` \| ``"all"`` \| ``"additions"`` \| ``"additions removals"`` \| ``"additions text"`` \| ``"removals"`` \| ``"removals additions"`` \| ``"removals text"`` \| ``"text additions"`` \| ``"text removals"`` Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. diff --git a/docs/interfaces/react.VListHandle.md b/docs/interfaces/react.VListHandle.md index 7d89e7fa3..9ef501f37 100644 --- a/docs/interfaces/react.VListHandle.md +++ b/docs/interfaces/react.VListHandle.md @@ -4,6 +4,12 @@ Methods of [VList](../modules/react.md#vlist). +## Hierarchy + +- [`VirtualizerHandle`](react.VirtualizerHandle.md) + + ↳ **`VListHandle`** + ## Table of contents ### Methods @@ -38,9 +44,13 @@ Scroll to the item specified by index. `void` +#### Inherited from + +[VirtualizerHandle](react.VirtualizerHandle.md).[scrollToIndex](react.VirtualizerHandle.md#scrolltoindex) + #### Defined in -[src/react/VList.tsx:70](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L70) +[src/react/Virtualizer.tsx:63](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L63) ___ @@ -60,9 +70,13 @@ Scroll to the given offset. `void` +#### Inherited from + +[VirtualizerHandle](react.VirtualizerHandle.md).[scrollTo](react.VirtualizerHandle.md#scrollto) + #### Defined in -[src/react/VList.tsx:75](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L75) +[src/react/Virtualizer.tsx:68](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L68) ___ @@ -82,9 +96,13 @@ Scroll by the given offset. `void` +#### Inherited from + +[VirtualizerHandle](react.VirtualizerHandle.md).[scrollBy](react.VirtualizerHandle.md#scrollby) + #### Defined in -[src/react/VList.tsx:80](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L80) +[src/react/Virtualizer.tsx:73](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L73) ## Properties @@ -94,9 +112,13 @@ Scroll by the given offset. Get current [CacheSnapshot](react.CacheSnapshot.md). +#### Inherited from + +[VirtualizerHandle](react.VirtualizerHandle.md).[cache](react.VirtualizerHandle.md#cache) + #### Defined in -[src/react/VList.tsx:52](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L52) +[src/react/Virtualizer.tsx:45](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L45) ___ @@ -106,9 +128,13 @@ ___ Get current scrollTop or scrollLeft. +#### Inherited from + +[VirtualizerHandle](react.VirtualizerHandle.md).[scrollOffset](react.VirtualizerHandle.md#scrolloffset) + #### Defined in -[src/react/VList.tsx:56](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L56) +[src/react/Virtualizer.tsx:49](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L49) ___ @@ -118,9 +144,13 @@ ___ Get current scrollHeight or scrollWidth. +#### Inherited from + +[VirtualizerHandle](react.VirtualizerHandle.md).[scrollSize](react.VirtualizerHandle.md#scrollsize) + #### Defined in -[src/react/VList.tsx:60](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L60) +[src/react/Virtualizer.tsx:53](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L53) ___ @@ -130,6 +160,10 @@ ___ Get current offsetHeight or offsetWidth. +#### Inherited from + +[VirtualizerHandle](react.VirtualizerHandle.md).[viewportSize](react.VirtualizerHandle.md#viewportsize) + #### Defined in -[src/react/VList.tsx:64](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L64) +[src/react/Virtualizer.tsx:57](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L57) diff --git a/docs/interfaces/react.VListProps.md b/docs/interfaces/react.VListProps.md index 371c7a50f..1fee3e13f 100644 --- a/docs/interfaces/react.VListProps.md +++ b/docs/interfaces/react.VListProps.md @@ -6,6 +6,8 @@ Props of [VList](../modules/react.md#vlist). ## Hierarchy +- `Pick`\<[`VirtualizerProps`](react.VirtualizerProps.md), ``"children"`` \| ``"count"`` \| ``"overscan"`` \| ``"itemSize"`` \| ``"shift"`` \| ``"horizontal"`` \| ``"reverse"`` \| ``"cache"`` \| ``"ssrCount"`` \| ``"item"`` \| ``"onScroll"`` \| ``"onScrollEnd"`` \| ``"onRangeChange"``\> + - [`ViewportComponentAttributes`](../modules/react.md#viewportcomponentattributes) ↳ **`VListProps`** @@ -15,17 +17,17 @@ Props of [VList](../modules/react.md#vlist). ### Properties - [children](react.VListProps.md#children) +- [onScroll](react.VListProps.md#onscroll) +- [reverse](react.VListProps.md#reverse) +- [shift](react.VListProps.md#shift) - [count](react.VListProps.md#count) - [overscan](react.VListProps.md#overscan) -- [initialItemSize](react.VListProps.md#initialitemsize) -- [shift](react.VListProps.md#shift) +- [itemSize](react.VListProps.md#itemsize) - [horizontal](react.VListProps.md#horizontal) -- [reverse](react.VListProps.md#reverse) - [cache](react.VListProps.md#cache) - [ssrCount](react.VListProps.md#ssrcount) -- [components](react.VListProps.md#components) -- [onScroll](react.VListProps.md#onscroll) -- [onScrollStop](react.VListProps.md#onscrollstop) +- [item](react.VListProps.md#item) +- [onScrollEnd](react.VListProps.md#onscrollend) - [onRangeChange](react.VListProps.md#onrangechange) - [className](react.VListProps.md#classname) - [style](react.VListProps.md#style) @@ -95,56 +97,61 @@ Props of [VList](../modules/react.md#vlist). Elements rendered by this component. -You can also pass a function and set [VListProps.count](react.VListProps.md#count) to create elements lazily. +You can also pass a function and set [VirtualizerProps.count](react.VirtualizerProps.md#count) to create elements lazily. + +#### Inherited from + +Pick.children #### Defined in -[src/react/VList.tsx:92](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L92) +[src/react/Virtualizer.tsx:85](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L85) ___ -### count +### onScroll -• `Optional` **count**: `number` +• `Optional` **onScroll**: (`offset`: `number`) => `void` -If you set a function to [VListProps.children](react.VListProps.md#children), you have to set total number of items to this prop. +#### Type declaration -#### Defined in +▸ (`offset`): `void` -[src/react/VList.tsx:96](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L96) +Callback invoked whenever scroll offset changes. -___ +##### Parameters -### overscan +| Name | Type | Description | +| :------ | :------ | :------ | +| `offset` | `number` | Current scrollTop or scrollLeft. | -• `Optional` **overscan**: `number` +##### Returns -Number of items to render above/below the visible bounds of the list. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling. +`void` -**`Default Value`** +#### Inherited from -```ts -4 -``` +Pick.onScroll #### Defined in -[src/react/VList.tsx:101](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L101) +[src/react/Virtualizer.tsx:148](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L148) ___ -### initialItemSize +### reverse -• `Optional` **initialItemSize**: `number` +• `Optional` **reverse**: `boolean` -Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly. +If true, items are aligned to the end of the list when total size of items are smaller than viewport size. It's useful for chat like app. -- 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. +#### Inherited from + +Pick.reverse #### Defined in -[src/react/VList.tsx:108](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L108) +[src/react/Virtualizer.tsx:113](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L113) ___ @@ -154,108 +161,146 @@ ___ 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. +#### Inherited from + +Pick.shift + #### Defined in -[src/react/VList.tsx:112](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L112) +[src/react/Virtualizer.tsx:105](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L105) ___ -### horizontal +### count -• `Optional` **horizontal**: `boolean` +• `Optional` **count**: `number` -If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list. +If you set a function to [VirtualizerProps.children](react.VirtualizerProps.md#children), you have to set total number of items to this prop. + +#### Inherited from + +Pick.count #### Defined in -[src/react/VList.tsx:116](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L116) +[src/react/Virtualizer.tsx:89](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L89) ___ -### reverse +### overscan -• `Optional` **reverse**: `boolean` +• `Optional` **overscan**: `number` -If true, items are aligned to the end of the list when total size of items are smaller than viewport size. It's useful for chat like app. +Number of items to render above/below the visible bounds of the list. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling. + +**`Default Value`** + +```ts +4 +``` + +#### Inherited from + +Pick.overscan #### Defined in -[src/react/VList.tsx:120](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L120) +[src/react/Virtualizer.tsx:94](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L94) ___ -### cache +### itemSize -• `Optional` **cache**: [`CacheSnapshot`](react.CacheSnapshot.md) +• `Optional` **itemSize**: `number` + +Item size hint for unmeasured items. 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. -You can restore cache by passing a [CacheSnapshot](react.CacheSnapshot.md) on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from [VListHandle.cache](react.VListHandle.md#cache). +#### Inherited from + +Pick.itemSize #### Defined in -[src/react/VList.tsx:124](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L124) +[src/react/Virtualizer.tsx:101](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L101) ___ -### ssrCount +### horizontal -• `Optional` **ssrCount**: `number` +• `Optional` **horizontal**: `boolean` -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. +If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list. + +#### Inherited from + +Pick.horizontal #### Defined in -[src/react/VList.tsx:128](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L128) +[src/react/Virtualizer.tsx:109](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L109) ___ -### components +### cache -• `Optional` **components**: `Object` +• `Optional` **cache**: [`CacheSnapshot`](react.CacheSnapshot.md) -Customized components for advanced usage. +You can restore cache by passing a [CacheSnapshot](react.CacheSnapshot.md) on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from [VirtualizerHandle.cache](react.VListHandle.md#cache). -#### Type declaration +#### Inherited from -| Name | Type | Description | -| :------ | :------ | :------ | -| `Root?` | `ForwardRefExoticComponent`\<[`CustomViewportComponentProps`](react.CustomViewportComponentProps.md) & `RefAttributes`\<`any`\>\> | Component for scrollable element. This component will get [CustomViewportComponentProps](react.CustomViewportComponentProps.md) as props. **`Default Value`** ```ts {@link DefaultViewport} ``` | -| `Item?` | `CustomItemComponentOrElement` | Component or element type for item element. This component will get [CustomItemComponentProps](react.CustomItemComponentProps.md) as props. **`Default Value`** ```ts "div" ``` | +Pick.cache #### Defined in -[src/react/VList.tsx:132](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L132) +[src/react/Virtualizer.tsx:117](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L117) ___ -### onScroll +### ssrCount -• `Optional` **onScroll**: (`offset`: `number`) => `void` +• `Optional` **ssrCount**: `number` -#### Type declaration +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. -▸ (`offset`): `void` +#### Inherited from -Callback invoked whenever scroll offset changes. +Pick.ssrCount -##### Parameters +#### Defined in -| Name | Type | Description | -| :------ | :------ | :------ | -| `offset` | `number` | Current scrollTop or scrollLeft. | +[src/react/Virtualizer.tsx:129](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L129) -##### Returns +___ -`void` +### item + +• `Optional` **item**: [`CustomItemComponent`](../modules/react.md#customitemcomponent) \| keyof `IntrinsicElements` + +Component or element type for item element. This component will get [CustomItemComponentProps](react.CustomItemComponentProps.md) as props. + +**`Default Value`** + +```ts +"div" +``` + +#### Inherited from + +Pick.item #### Defined in -[src/react/VList.tsx:148](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L148) +[src/react/Virtualizer.tsx:139](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L139) ___ -### onScrollStop +### onScrollEnd -• `Optional` **onScrollStop**: () => `void` +• `Optional` **onScrollEnd**: () => `void` #### Type declaration @@ -267,9 +312,13 @@ Callback invoked when scrolling stops. `void` +#### Inherited from + +Pick.onScrollEnd + #### Defined in -[src/react/VList.tsx:152](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L152) +[src/react/Virtualizer.tsx:152](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L152) ___ @@ -294,9 +343,13 @@ Callback invoked when visible items range changes. `void` +#### Inherited from + +Pick.onRangeChange + #### Defined in -[src/react/VList.tsx:156](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VList.tsx#L156) +[src/react/Virtualizer.tsx:156](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L156) ___ @@ -418,7 +471,7 @@ ___ ### aria-autocomplete -• `Optional` **aria-autocomplete**: ``"list"`` \| ``"none"`` \| ``"inline"`` \| ``"both"`` +• `Optional` **aria-autocomplete**: ``"inline"`` \| ``"none"`` \| ``"both"`` \| ``"list"`` Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. @@ -709,7 +762,7 @@ ___ ### aria-dropeffect -• `Optional` **aria-dropeffect**: ``"copy"`` \| ``"link"`` \| ``"none"`` \| ``"move"`` \| ``"execute"`` \| ``"popup"`` +• `Optional` **aria-dropeffect**: ``"copy"`` \| ``"none"`` \| ``"link"`` \| ``"move"`` \| ``"execute"`` \| ``"popup"`` Indicates what functions can be performed when a dragged object is released on the drop target. @@ -803,7 +856,7 @@ ___ ### aria-haspopup -• `Optional` **aria-haspopup**: `boolean` \| ``"dialog"`` \| ``"grid"`` \| ``"listbox"`` \| ``"menu"`` \| ``"tree"`` \| ``"false"`` \| ``"true"`` +• `Optional` **aria-haspopup**: `boolean` \| ``"grid"`` \| ``"dialog"`` \| ``"menu"`` \| ``"listbox"`` \| ``"false"`` \| ``"true"`` \| ``"tree"`` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. @@ -1110,7 +1163,7 @@ ___ ### aria-relevant -• `Optional` **aria-relevant**: ``"all"`` \| ``"text"`` \| ``"additions"`` \| ``"additions removals"`` \| ``"additions text"`` \| ``"removals"`` \| ``"removals additions"`` \| ``"removals text"`` \| ``"text additions"`` \| ``"text removals"`` +• `Optional` **aria-relevant**: ``"text"`` \| ``"all"`` \| ``"additions"`` \| ``"additions removals"`` \| ``"additions text"`` \| ``"removals"`` \| ``"removals additions"`` \| ``"removals text"`` \| ``"text additions"`` \| ``"text removals"`` Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. diff --git a/docs/interfaces/react.VirtualizerHandle.md b/docs/interfaces/react.VirtualizerHandle.md new file mode 100644 index 000000000..4c046195a --- /dev/null +++ b/docs/interfaces/react.VirtualizerHandle.md @@ -0,0 +1,141 @@ +# Interface: VirtualizerHandle + +[react](../modules/react.md).VirtualizerHandle + +Methods of [Virtualizer](../modules/react.md#virtualizer). + +## Hierarchy + +- **`VirtualizerHandle`** + + ↳ [`VListHandle`](react.VListHandle.md) + +## Table of contents + +### Methods + +- [scrollToIndex](react.VirtualizerHandle.md#scrolltoindex) +- [scrollTo](react.VirtualizerHandle.md#scrollto) +- [scrollBy](react.VirtualizerHandle.md#scrollby) + +### Properties + +- [cache](react.VirtualizerHandle.md#cache) +- [scrollOffset](react.VirtualizerHandle.md#scrolloffset) +- [scrollSize](react.VirtualizerHandle.md#scrollsize) +- [viewportSize](react.VirtualizerHandle.md#viewportsize) + +## Methods + +### scrollToIndex + +▸ **scrollToIndex**(`index`, `opts?`): `void` + +Scroll to the item specified by index. + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `index` | `number` | index of item | +| `opts?` | [`ScrollToIndexOpts`](react.ScrollToIndexOpts.md) | options | + +#### Returns + +`void` + +#### Defined in + +[src/react/Virtualizer.tsx:63](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L63) + +___ + +### scrollTo + +▸ **scrollTo**(`offset`): `void` + +Scroll to the given offset. + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `offset` | `number` | offset from start | + +#### Returns + +`void` + +#### Defined in + +[src/react/Virtualizer.tsx:68](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L68) + +___ + +### scrollBy + +▸ **scrollBy**(`offset`): `void` + +Scroll by the given offset. + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `offset` | `number` | offset from current position | + +#### Returns + +`void` + +#### Defined in + +[src/react/Virtualizer.tsx:73](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L73) + +## Properties + +### cache + +• `Readonly` **cache**: [`CacheSnapshot`](react.CacheSnapshot.md) + +Get current [CacheSnapshot](react.CacheSnapshot.md). + +#### Defined in + +[src/react/Virtualizer.tsx:45](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L45) + +___ + +### scrollOffset + +• `Readonly` **scrollOffset**: `number` + +Get current scrollTop or scrollLeft. + +#### Defined in + +[src/react/Virtualizer.tsx:49](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L49) + +___ + +### scrollSize + +• `Readonly` **scrollSize**: `number` + +Get current scrollHeight or scrollWidth. + +#### Defined in + +[src/react/Virtualizer.tsx:53](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L53) + +___ + +### viewportSize + +• `Readonly` **viewportSize**: `number` + +Get current offsetHeight or offsetWidth. + +#### Defined in + +[src/react/Virtualizer.tsx:57](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L57) diff --git a/docs/interfaces/react.VirtualizerProps.md b/docs/interfaces/react.VirtualizerProps.md new file mode 100644 index 000000000..3c5c00ee9 --- /dev/null +++ b/docs/interfaces/react.VirtualizerProps.md @@ -0,0 +1,291 @@ +# Interface: VirtualizerProps + +[react](../modules/react.md).VirtualizerProps + +Props of [Virtualizer](../modules/react.md#virtualizer). + +## Table of contents + +### Properties + +- [children](react.VirtualizerProps.md#children) +- [count](react.VirtualizerProps.md#count) +- [overscan](react.VirtualizerProps.md#overscan) +- [itemSize](react.VirtualizerProps.md#itemsize) +- [shift](react.VirtualizerProps.md#shift) +- [horizontal](react.VirtualizerProps.md#horizontal) +- [reverse](react.VirtualizerProps.md#reverse) +- [cache](react.VirtualizerProps.md#cache) +- [startMargin](react.VirtualizerProps.md#startmargin) +- [endMargin](react.VirtualizerProps.md#endmargin) +- [ssrCount](react.VirtualizerProps.md#ssrcount) +- [as](react.VirtualizerProps.md#as) +- [item](react.VirtualizerProps.md#item) +- [scrollRef](react.VirtualizerProps.md#scrollref) +- [onScroll](react.VirtualizerProps.md#onscroll) +- [onScrollEnd](react.VirtualizerProps.md#onscrollend) +- [onRangeChange](react.VirtualizerProps.md#onrangechange) + +## Properties + +### children + +• **children**: `ReactNode` \| (`index`: `number`) => `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`\>\> + +Elements rendered by this component. + +You can also pass a function and set [VirtualizerProps.count](react.VirtualizerProps.md#count) to create elements lazily. + +#### Defined in + +[src/react/Virtualizer.tsx:85](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L85) + +___ + +### count + +• `Optional` **count**: `number` + +If you set a function to [VirtualizerProps.children](react.VirtualizerProps.md#children), you have to set total number of items to this prop. + +#### Defined in + +[src/react/Virtualizer.tsx:89](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L89) + +___ + +### overscan + +• `Optional` **overscan**: `number` + +Number of items to render above/below the visible bounds of the list. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling. + +**`Default Value`** + +```ts +4 +``` + +#### Defined in + +[src/react/Virtualizer.tsx:94](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L94) + +___ + +### itemSize + +• `Optional` **itemSize**: `number` + +Item size hint for unmeasured items. 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. + +#### Defined in + +[src/react/Virtualizer.tsx:101](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L101) + +___ + +### 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. + +#### Defined in + +[src/react/Virtualizer.tsx:105](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L105) + +___ + +### horizontal + +• `Optional` **horizontal**: `boolean` + +If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list. + +#### Defined in + +[src/react/Virtualizer.tsx:109](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L109) + +___ + +### reverse + +• `Optional` **reverse**: `boolean` + +If true, items are aligned to the end of the list when total size of items are smaller than viewport size. It's useful for chat like app. + +#### Defined in + +[src/react/Virtualizer.tsx:113](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L113) + +___ + +### cache + +• `Optional` **cache**: [`CacheSnapshot`](react.CacheSnapshot.md) + +You can restore cache by passing a [CacheSnapshot](react.CacheSnapshot.md) on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from [VirtualizerHandle.cache](react.VListHandle.md#cache). + +#### Defined in + +[src/react/Virtualizer.tsx:117](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L117) + +___ + +### startMargin + +• `Optional` **startMargin**: `number` + +If you put an element before virtualizer, you have to define its height with this prop. + +#### Defined in + +[src/react/Virtualizer.tsx:121](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L121) + +___ + +### endMargin + +• `Optional` **endMargin**: `number` + +If you put an element after virtualizer, you have to define its height with this prop. + +#### Defined in + +[src/react/Virtualizer.tsx:125](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L125) + +___ + +### 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. + +#### Defined in + +[src/react/Virtualizer.tsx:129](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L129) + +___ + +### as + +• `Optional` **as**: [`CustomContainerComponent`](../modules/react.md#customcontainercomponent) \| keyof `IntrinsicElements` + +Component or element type for container element. + +**`Default Value`** + +```ts +"div" +``` + +#### Defined in + +[src/react/Virtualizer.tsx:134](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L134) + +___ + +### item + +• `Optional` **item**: [`CustomItemComponent`](../modules/react.md#customitemcomponent) \| keyof `IntrinsicElements` + +Component or element type for item element. This component will get [CustomItemComponentProps](react.CustomItemComponentProps.md) as props. + +**`Default Value`** + +```ts +"div" +``` + +#### Defined in + +[src/react/Virtualizer.tsx:139](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L139) + +___ + +### scrollRef + +• `Optional` **scrollRef**: `RefObject`\<`HTMLElement`\> + +Reference to the scrollable element. The default will get the parent element of virtualizer. + +#### Defined in + +[src/react/Virtualizer.tsx:143](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L143) + +___ + +### onScroll + +• `Optional` **onScroll**: (`offset`: `number`) => `void` + +#### Type declaration + +▸ (`offset`): `void` + +Callback invoked whenever scroll offset changes. + +##### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `offset` | `number` | Current scrollTop or scrollLeft. | + +##### Returns + +`void` + +#### Defined in + +[src/react/Virtualizer.tsx:148](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L148) + +___ + +### onScrollEnd + +• `Optional` **onScrollEnd**: () => `void` + +#### Type declaration + +▸ (): `void` + +Callback invoked when scrolling stops. + +##### Returns + +`void` + +#### Defined in + +[src/react/Virtualizer.tsx:152](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L152) + +___ + +### onRangeChange + +• `Optional` **onRangeChange**: (`startIndex`: `number`, `endIndex`: `number`) => `void` + +#### Type declaration + +▸ (`startIndex`, `endIndex`): `void` + +Callback invoked when visible items range changes. + +##### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `startIndex` | `number` | The start index of viewable items. | +| `endIndex` | `number` | The end index of viewable items. | + +##### Returns + +`void` + +#### Defined in + +[src/react/Virtualizer.tsx:156](https://github.com/inokawa/virtua/blob/facd0683/src/react/Virtualizer.tsx#L156) diff --git a/docs/interfaces/react.WVListHandle.md b/docs/interfaces/react.WVListHandle.md deleted file mode 100644 index 841a24751..000000000 --- a/docs/interfaces/react.WVListHandle.md +++ /dev/null @@ -1,23 +0,0 @@ -# Interface: WVListHandle - -[react](../modules/react.md).WVListHandle - -Methods of [WVList](../modules/react.md#wvlist). - -## Table of contents - -### Properties - -- [cache](react.WVListHandle.md#cache) - -## Properties - -### cache - -• `Readonly` **cache**: [`CacheSnapshot`](react.CacheSnapshot.md) - -Get current [CacheSnapshot](react.CacheSnapshot.md). - -#### Defined in - -[src/react/WVList.tsx:51](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L51) diff --git a/docs/interfaces/react.WVListProps.md b/docs/interfaces/react.WVListProps.md deleted file mode 100644 index 726ee7d9c..000000000 --- a/docs/interfaces/react.WVListProps.md +++ /dev/null @@ -1,1326 +0,0 @@ -# Interface: WVListProps - -[react](../modules/react.md).WVListProps - -Props of [WVList](../modules/react.md#wvlist). - -## Hierarchy - -- [`ViewportComponentAttributes`](../modules/react.md#viewportcomponentattributes) - - ↳ **`WVListProps`** - -## Table of contents - -### Properties - -- [children](react.WVListProps.md#children) -- [count](react.WVListProps.md#count) -- [overscan](react.WVListProps.md#overscan) -- [initialItemSize](react.WVListProps.md#initialitemsize) -- [shift](react.WVListProps.md#shift) -- [horizontal](react.WVListProps.md#horizontal) -- [cache](react.WVListProps.md#cache) -- [ssrCount](react.WVListProps.md#ssrcount) -- [components](react.WVListProps.md#components) -- [onScrollStop](react.WVListProps.md#onscrollstop) -- [onRangeChange](react.WVListProps.md#onrangechange) -- [className](react.WVListProps.md#classname) -- [style](react.WVListProps.md#style) -- [id](react.WVListProps.md#id) -- [role](react.WVListProps.md#role) -- [tabIndex](react.WVListProps.md#tabindex) -- [onKeyDown](react.WVListProps.md#onkeydown) -- [aria-activedescendant](react.WVListProps.md#aria-activedescendant) -- [aria-atomic](react.WVListProps.md#aria-atomic) -- [aria-autocomplete](react.WVListProps.md#aria-autocomplete) -- [aria-braillelabel](react.WVListProps.md#aria-braillelabel) -- [aria-brailleroledescription](react.WVListProps.md#aria-brailleroledescription) -- [aria-busy](react.WVListProps.md#aria-busy) -- [aria-checked](react.WVListProps.md#aria-checked) -- [aria-colcount](react.WVListProps.md#aria-colcount) -- [aria-colindex](react.WVListProps.md#aria-colindex) -- [aria-colindextext](react.WVListProps.md#aria-colindextext) -- [aria-colspan](react.WVListProps.md#aria-colspan) -- [aria-controls](react.WVListProps.md#aria-controls) -- [aria-current](react.WVListProps.md#aria-current) -- [aria-describedby](react.WVListProps.md#aria-describedby) -- [aria-description](react.WVListProps.md#aria-description) -- [aria-details](react.WVListProps.md#aria-details) -- [aria-disabled](react.WVListProps.md#aria-disabled) -- [aria-dropeffect](react.WVListProps.md#aria-dropeffect) -- [aria-errormessage](react.WVListProps.md#aria-errormessage) -- [aria-expanded](react.WVListProps.md#aria-expanded) -- [aria-flowto](react.WVListProps.md#aria-flowto) -- [aria-grabbed](react.WVListProps.md#aria-grabbed) -- [aria-haspopup](react.WVListProps.md#aria-haspopup) -- [aria-hidden](react.WVListProps.md#aria-hidden) -- [aria-invalid](react.WVListProps.md#aria-invalid) -- [aria-keyshortcuts](react.WVListProps.md#aria-keyshortcuts) -- [aria-label](react.WVListProps.md#aria-label) -- [aria-labelledby](react.WVListProps.md#aria-labelledby) -- [aria-level](react.WVListProps.md#aria-level) -- [aria-live](react.WVListProps.md#aria-live) -- [aria-modal](react.WVListProps.md#aria-modal) -- [aria-multiline](react.WVListProps.md#aria-multiline) -- [aria-multiselectable](react.WVListProps.md#aria-multiselectable) -- [aria-orientation](react.WVListProps.md#aria-orientation) -- [aria-owns](react.WVListProps.md#aria-owns) -- [aria-placeholder](react.WVListProps.md#aria-placeholder) -- [aria-posinset](react.WVListProps.md#aria-posinset) -- [aria-pressed](react.WVListProps.md#aria-pressed) -- [aria-readonly](react.WVListProps.md#aria-readonly) -- [aria-relevant](react.WVListProps.md#aria-relevant) -- [aria-required](react.WVListProps.md#aria-required) -- [aria-roledescription](react.WVListProps.md#aria-roledescription) -- [aria-rowcount](react.WVListProps.md#aria-rowcount) -- [aria-rowindex](react.WVListProps.md#aria-rowindex) -- [aria-rowindextext](react.WVListProps.md#aria-rowindextext) -- [aria-rowspan](react.WVListProps.md#aria-rowspan) -- [aria-selected](react.WVListProps.md#aria-selected) -- [aria-setsize](react.WVListProps.md#aria-setsize) -- [aria-sort](react.WVListProps.md#aria-sort) -- [aria-valuemax](react.WVListProps.md#aria-valuemax) -- [aria-valuemin](react.WVListProps.md#aria-valuemin) -- [aria-valuenow](react.WVListProps.md#aria-valuenow) -- [aria-valuetext](react.WVListProps.md#aria-valuetext) - -## Properties - -### children - -• **children**: `ReactNode` \| (`index`: `number`) => `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`\>\> - -Elements rendered by this component. - -You can also pass a function and set [WVListProps.count](react.WVListProps.md#count) to create elements lazily. - -#### Defined in - -[src/react/WVList.tsx:63](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L63) - -___ - -### count - -• `Optional` **count**: `number` - -If you set a function to [WVListProps.children](react.WVListProps.md#children), you have to set total number of items to this prop. - -#### Defined in - -[src/react/WVList.tsx:67](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L67) - -___ - -### overscan - -• `Optional` **overscan**: `number` - -Number of items to render above/below the visible bounds of the list. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling. - -**`Default Value`** - -```ts -4 -``` - -#### Defined in - -[src/react/WVList.tsx:72](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L72) - -___ - -### initialItemSize - -• `Optional` **initialItemSize**: `number` - -Item size hint for unmeasured items. 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. - -#### Defined in - -[src/react/WVList.tsx:79](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L79) - -___ - -### 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. - -#### Defined in - -[src/react/WVList.tsx:83](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L83) - -___ - -### horizontal - -• `Optional` **horizontal**: `boolean` - -If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list. - -#### Defined in - -[src/react/WVList.tsx:87](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L87) - -___ - -### cache - -• `Optional` **cache**: [`CacheSnapshot`](react.CacheSnapshot.md) - -You can restore cache by passing a [CacheSnapshot](react.CacheSnapshot.md) on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from [WVListHandle.cache](react.WVListHandle.md#cache). - -#### Defined in - -[src/react/WVList.tsx:91](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L91) - -___ - -### 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. - -#### Defined in - -[src/react/WVList.tsx:95](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L95) - -___ - -### components - -• `Optional` **components**: `Object` - -Customized components for advanced usage. - -#### Type declaration - -| Name | Type | Description | -| :------ | :------ | :------ | -| `Root?` | `ForwardRefExoticComponent`\<[`CustomViewportComponentProps`](react.CustomViewportComponentProps.md) & `RefAttributes`\<`any`\>\> | Component for scrollable element. This component will get [CustomViewportComponentProps](react.CustomViewportComponentProps.md) as props. **`Default Value`** ```ts {@link DefaultViewport} ``` | -| `Item?` | `CustomItemComponentOrElement` | Component or element type for item element. This component will get [CustomItemComponentProps](react.CustomItemComponentProps.md) as props. **`Default Value`** ```ts "div" ``` | - -#### Defined in - -[src/react/WVList.tsx:99](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L99) - -___ - -### onScrollStop - -• `Optional` **onScrollStop**: () => `void` - -#### Type declaration - -▸ (): `void` - -Callback invoked when scrolling stops. - -##### Returns - -`void` - -#### Defined in - -[src/react/WVList.tsx:114](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L114) - -___ - -### onRangeChange - -• `Optional` **onRangeChange**: (`startIndex`: `number`, `endIndex`: `number`) => `void` - -#### Type declaration - -▸ (`startIndex`, `endIndex`): `void` - -Callback invoked when visible items range changes. - -##### Parameters - -| Name | Type | Description | -| :------ | :------ | :------ | -| `startIndex` | `number` | The start index of viewable items. | -| `endIndex` | `number` | The end index of viewable items. | - -##### Returns - -`void` - -#### Defined in - -[src/react/WVList.tsx:118](https://github.com/inokawa/virtua/blob/de57a89c/src/react/WVList.tsx#L118) - -___ - -### className - -• `Optional` **className**: `string` - -#### Inherited from - -ViewportComponentAttributes.className - -#### Defined in - -node_modules/@types/react/index.d.ts:1970 - -___ - -### style - -• `Optional` **style**: `CSSProperties` - -#### Inherited from - -ViewportComponentAttributes.style - -#### Defined in - -node_modules/@types/react/index.d.ts:1981 - -___ - -### id - -• `Optional` **id**: `string` - -#### Inherited from - -ViewportComponentAttributes.id - -#### Defined in - -node_modules/@types/react/index.d.ts:1976 - -___ - -### role - -• `Optional` **role**: `AriaRole` - -#### Inherited from - -ViewportComponentAttributes.role - -#### Defined in - -node_modules/@types/react/index.d.ts:1990 - -___ - -### tabIndex - -• `Optional` **tabIndex**: `number` - -#### Inherited from - -ViewportComponentAttributes.tabIndex - -#### Defined in - -node_modules/@types/react/index.d.ts:1982 - -___ - -### onKeyDown - -• `Optional` **onKeyDown**: `KeyboardEventHandler`\<`HTMLElement`\> - -#### Inherited from - -ViewportComponentAttributes.onKeyDown - -#### Defined in - -node_modules/@types/react/index.d.ts:1500 - -___ - -### aria-activedescendant - -• `Optional` **aria-activedescendant**: `string` - -Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. - -#### Inherited from - -ViewportComponentAttributes.aria-activedescendant - -#### Defined in - -node_modules/@types/react/index.d.ts:1666 - -___ - -### aria-atomic - -• `Optional` **aria-atomic**: `Booleanish` - -Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. - -#### Inherited from - -ViewportComponentAttributes.aria-atomic - -#### Defined in - -node_modules/@types/react/index.d.ts:1668 - -___ - -### aria-autocomplete - -• `Optional` **aria-autocomplete**: ``"list"`` \| ``"none"`` \| ``"inline"`` \| ``"both"`` - -Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be -presented if they are made. - -#### Inherited from - -ViewportComponentAttributes.aria-autocomplete - -#### Defined in - -node_modules/@types/react/index.d.ts:1673 - -___ - -### aria-braillelabel - -• `Optional` **aria-braillelabel**: `string` - -Defines a string value that labels the current element, which is intended to be converted into Braille. - -**`See`** - -aria-label. - -#### Inherited from - -ViewportComponentAttributes.aria-braillelabel - -#### Defined in - -node_modules/@types/react/index.d.ts:1679 - -___ - -### aria-brailleroledescription - -• `Optional` **aria-brailleroledescription**: `string` - -Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. - -**`See`** - -aria-roledescription. - -#### Inherited from - -ViewportComponentAttributes.aria-brailleroledescription - -#### Defined in - -node_modules/@types/react/index.d.ts:1684 - -___ - -### aria-busy - -• `Optional` **aria-busy**: `Booleanish` - -#### Inherited from - -ViewportComponentAttributes.aria-busy - -#### Defined in - -node_modules/@types/react/index.d.ts:1685 - -___ - -### aria-checked - -• `Optional` **aria-checked**: `boolean` \| ``"mixed"`` \| ``"false"`` \| ``"true"`` - -Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. - -**`See`** - - - aria-pressed - - aria-selected. - -#### Inherited from - -ViewportComponentAttributes.aria-checked - -#### Defined in - -node_modules/@types/react/index.d.ts:1690 - -___ - -### aria-colcount - -• `Optional` **aria-colcount**: `number` - -Defines the total number of columns in a table, grid, or treegrid. - -**`See`** - -aria-colindex. - -#### Inherited from - -ViewportComponentAttributes.aria-colcount - -#### Defined in - -node_modules/@types/react/index.d.ts:1695 - -___ - -### aria-colindex - -• `Optional` **aria-colindex**: `number` - -Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. - -**`See`** - - - aria-colcount - - aria-colspan. - -#### Inherited from - -ViewportComponentAttributes.aria-colindex - -#### Defined in - -node_modules/@types/react/index.d.ts:1700 - -___ - -### aria-colindextext - -• `Optional` **aria-colindextext**: `string` - -Defines a human readable text alternative of aria-colindex. - -**`See`** - -aria-rowindextext. - -#### Inherited from - -ViewportComponentAttributes.aria-colindextext - -#### Defined in - -node_modules/@types/react/index.d.ts:1705 - -___ - -### aria-colspan - -• `Optional` **aria-colspan**: `number` - -Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. - -**`See`** - - - aria-colindex - - aria-rowspan. - -#### Inherited from - -ViewportComponentAttributes.aria-colspan - -#### Defined in - -node_modules/@types/react/index.d.ts:1710 - -___ - -### aria-controls - -• `Optional` **aria-controls**: `string` - -Identifies the element (or elements) whose contents or presence are controlled by the current element. - -**`See`** - -aria-owns. - -#### Inherited from - -ViewportComponentAttributes.aria-controls - -#### Defined in - -node_modules/@types/react/index.d.ts:1715 - -___ - -### aria-current - -• `Optional` **aria-current**: `boolean` \| ``"time"`` \| ``"page"`` \| ``"false"`` \| ``"true"`` \| ``"step"`` \| ``"location"`` \| ``"date"`` - -Indicates the element that represents the current item within a container or set of related elements. - -#### Inherited from - -ViewportComponentAttributes.aria-current - -#### Defined in - -node_modules/@types/react/index.d.ts:1717 - -___ - -### aria-describedby - -• `Optional` **aria-describedby**: `string` - -Identifies the element (or elements) that describes the object. - -**`See`** - -aria-labelledby - -#### Inherited from - -ViewportComponentAttributes.aria-describedby - -#### Defined in - -node_modules/@types/react/index.d.ts:1722 - -___ - -### aria-description - -• `Optional` **aria-description**: `string` - -Defines a string value that describes or annotates the current element. - -**`See`** - -related aria-describedby. - -#### Inherited from - -ViewportComponentAttributes.aria-description - -#### Defined in - -node_modules/@types/react/index.d.ts:1727 - -___ - -### aria-details - -• `Optional` **aria-details**: `string` - -Identifies the element that provides a detailed, extended description for the object. - -**`See`** - -aria-describedby. - -#### Inherited from - -ViewportComponentAttributes.aria-details - -#### Defined in - -node_modules/@types/react/index.d.ts:1732 - -___ - -### aria-disabled - -• `Optional` **aria-disabled**: `Booleanish` - -Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. - -**`See`** - - - aria-hidden - - aria-readonly. - -#### Inherited from - -ViewportComponentAttributes.aria-disabled - -#### Defined in - -node_modules/@types/react/index.d.ts:1737 - -___ - -### aria-dropeffect - -• `Optional` **aria-dropeffect**: ``"copy"`` \| ``"link"`` \| ``"none"`` \| ``"move"`` \| ``"execute"`` \| ``"popup"`` - -Indicates what functions can be performed when a dragged object is released on the drop target. - -**`Deprecated`** - -in ARIA 1.1 - -#### Inherited from - -ViewportComponentAttributes.aria-dropeffect - -#### Defined in - -node_modules/@types/react/index.d.ts:1742 - -___ - -### aria-errormessage - -• `Optional` **aria-errormessage**: `string` - -Identifies the element that provides an error message for the object. - -**`See`** - - - aria-invalid - - aria-describedby. - -#### Inherited from - -ViewportComponentAttributes.aria-errormessage - -#### Defined in - -node_modules/@types/react/index.d.ts:1747 - -___ - -### aria-expanded - -• `Optional` **aria-expanded**: `Booleanish` - -Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. - -#### Inherited from - -ViewportComponentAttributes.aria-expanded - -#### Defined in - -node_modules/@types/react/index.d.ts:1749 - -___ - -### aria-flowto - -• `Optional` **aria-flowto**: `string` - -Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, -allows assistive technology to override the general default of reading in document source order. - -#### Inherited from - -ViewportComponentAttributes.aria-flowto - -#### Defined in - -node_modules/@types/react/index.d.ts:1754 - -___ - -### aria-grabbed - -• `Optional` **aria-grabbed**: `Booleanish` - -Indicates an element's "grabbed" state in a drag-and-drop operation. - -**`Deprecated`** - -in ARIA 1.1 - -#### Inherited from - -ViewportComponentAttributes.aria-grabbed - -#### Defined in - -node_modules/@types/react/index.d.ts:1759 - -___ - -### aria-haspopup - -• `Optional` **aria-haspopup**: `boolean` \| ``"dialog"`` \| ``"grid"`` \| ``"listbox"`` \| ``"menu"`` \| ``"tree"`` \| ``"false"`` \| ``"true"`` - -Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. - -#### Inherited from - -ViewportComponentAttributes.aria-haspopup - -#### Defined in - -node_modules/@types/react/index.d.ts:1761 - -___ - -### aria-hidden - -• `Optional` **aria-hidden**: `Booleanish` - -Indicates whether the element is exposed to an accessibility API. - -**`See`** - -aria-disabled. - -#### Inherited from - -ViewportComponentAttributes.aria-hidden - -#### Defined in - -node_modules/@types/react/index.d.ts:1766 - -___ - -### aria-invalid - -• `Optional` **aria-invalid**: `boolean` \| ``"false"`` \| ``"true"`` \| ``"grammar"`` \| ``"spelling"`` - -Indicates the entered value does not conform to the format expected by the application. - -**`See`** - -aria-errormessage. - -#### Inherited from - -ViewportComponentAttributes.aria-invalid - -#### Defined in - -node_modules/@types/react/index.d.ts:1771 - -___ - -### aria-keyshortcuts - -• `Optional` **aria-keyshortcuts**: `string` - -Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. - -#### Inherited from - -ViewportComponentAttributes.aria-keyshortcuts - -#### Defined in - -node_modules/@types/react/index.d.ts:1773 - -___ - -### aria-label - -• `Optional` **aria-label**: `string` - -Defines a string value that labels the current element. - -**`See`** - -aria-labelledby. - -#### Inherited from - -ViewportComponentAttributes.aria-label - -#### Defined in - -node_modules/@types/react/index.d.ts:1778 - -___ - -### aria-labelledby - -• `Optional` **aria-labelledby**: `string` - -Identifies the element (or elements) that labels the current element. - -**`See`** - -aria-describedby. - -#### Inherited from - -ViewportComponentAttributes.aria-labelledby - -#### Defined in - -node_modules/@types/react/index.d.ts:1783 - -___ - -### aria-level - -• `Optional` **aria-level**: `number` - -Defines the hierarchical level of an element within a structure. - -#### Inherited from - -ViewportComponentAttributes.aria-level - -#### Defined in - -node_modules/@types/react/index.d.ts:1785 - -___ - -### aria-live - -• `Optional` **aria-live**: ``"off"`` \| ``"assertive"`` \| ``"polite"`` - -Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. - -#### Inherited from - -ViewportComponentAttributes.aria-live - -#### Defined in - -node_modules/@types/react/index.d.ts:1787 - -___ - -### aria-modal - -• `Optional` **aria-modal**: `Booleanish` - -Indicates whether an element is modal when displayed. - -#### Inherited from - -ViewportComponentAttributes.aria-modal - -#### Defined in - -node_modules/@types/react/index.d.ts:1789 - -___ - -### aria-multiline - -• `Optional` **aria-multiline**: `Booleanish` - -Indicates whether a text box accepts multiple lines of input or only a single line. - -#### Inherited from - -ViewportComponentAttributes.aria-multiline - -#### Defined in - -node_modules/@types/react/index.d.ts:1791 - -___ - -### aria-multiselectable - -• `Optional` **aria-multiselectable**: `Booleanish` - -Indicates that the user may select more than one item from the current selectable descendants. - -#### Inherited from - -ViewportComponentAttributes.aria-multiselectable - -#### Defined in - -node_modules/@types/react/index.d.ts:1793 - -___ - -### aria-orientation - -• `Optional` **aria-orientation**: ``"horizontal"`` \| ``"vertical"`` - -Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. - -#### Inherited from - -ViewportComponentAttributes.aria-orientation - -#### Defined in - -node_modules/@types/react/index.d.ts:1795 - -___ - -### aria-owns - -• `Optional` **aria-owns**: `string` - -Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship -between DOM elements where the DOM hierarchy cannot be used to represent the relationship. - -**`See`** - -aria-controls. - -#### Inherited from - -ViewportComponentAttributes.aria-owns - -#### Defined in - -node_modules/@types/react/index.d.ts:1801 - -___ - -### aria-placeholder - -• `Optional` **aria-placeholder**: `string` - -Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. -A hint could be a sample value or a brief description of the expected format. - -#### Inherited from - -ViewportComponentAttributes.aria-placeholder - -#### Defined in - -node_modules/@types/react/index.d.ts:1806 - -___ - -### aria-posinset - -• `Optional` **aria-posinset**: `number` - -Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. - -**`See`** - -aria-setsize. - -#### Inherited from - -ViewportComponentAttributes.aria-posinset - -#### Defined in - -node_modules/@types/react/index.d.ts:1811 - -___ - -### aria-pressed - -• `Optional` **aria-pressed**: `boolean` \| ``"mixed"`` \| ``"false"`` \| ``"true"`` - -Indicates the current "pressed" state of toggle buttons. - -**`See`** - - - aria-checked - - aria-selected. - -#### Inherited from - -ViewportComponentAttributes.aria-pressed - -#### Defined in - -node_modules/@types/react/index.d.ts:1816 - -___ - -### aria-readonly - -• `Optional` **aria-readonly**: `Booleanish` - -Indicates that the element is not editable, but is otherwise operable. - -**`See`** - -aria-disabled. - -#### Inherited from - -ViewportComponentAttributes.aria-readonly - -#### Defined in - -node_modules/@types/react/index.d.ts:1821 - -___ - -### aria-relevant - -• `Optional` **aria-relevant**: ``"all"`` \| ``"text"`` \| ``"additions"`` \| ``"additions removals"`` \| ``"additions text"`` \| ``"removals"`` \| ``"removals additions"`` \| ``"removals text"`` \| ``"text additions"`` \| ``"text removals"`` - -Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. - -**`See`** - -aria-atomic. - -#### Inherited from - -ViewportComponentAttributes.aria-relevant - -#### Defined in - -node_modules/@types/react/index.d.ts:1826 - -___ - -### aria-required - -• `Optional` **aria-required**: `Booleanish` - -Indicates that user input is required on the element before a form may be submitted. - -#### Inherited from - -ViewportComponentAttributes.aria-required - -#### Defined in - -node_modules/@types/react/index.d.ts:1839 - -___ - -### aria-roledescription - -• `Optional` **aria-roledescription**: `string` - -Defines a human-readable, author-localized description for the role of an element. - -#### Inherited from - -ViewportComponentAttributes.aria-roledescription - -#### Defined in - -node_modules/@types/react/index.d.ts:1841 - -___ - -### aria-rowcount - -• `Optional` **aria-rowcount**: `number` - -Defines the total number of rows in a table, grid, or treegrid. - -**`See`** - -aria-rowindex. - -#### Inherited from - -ViewportComponentAttributes.aria-rowcount - -#### Defined in - -node_modules/@types/react/index.d.ts:1846 - -___ - -### aria-rowindex - -• `Optional` **aria-rowindex**: `number` - -Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. - -**`See`** - - - aria-rowcount - - aria-rowspan. - -#### Inherited from - -ViewportComponentAttributes.aria-rowindex - -#### Defined in - -node_modules/@types/react/index.d.ts:1851 - -___ - -### aria-rowindextext - -• `Optional` **aria-rowindextext**: `string` - -Defines a human readable text alternative of aria-rowindex. - -**`See`** - -aria-colindextext. - -#### Inherited from - -ViewportComponentAttributes.aria-rowindextext - -#### Defined in - -node_modules/@types/react/index.d.ts:1856 - -___ - -### aria-rowspan - -• `Optional` **aria-rowspan**: `number` - -Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. - -**`See`** - - - aria-rowindex - - aria-colspan. - -#### Inherited from - -ViewportComponentAttributes.aria-rowspan - -#### Defined in - -node_modules/@types/react/index.d.ts:1861 - -___ - -### aria-selected - -• `Optional` **aria-selected**: `Booleanish` - -Indicates the current "selected" state of various widgets. - -**`See`** - - - aria-checked - - aria-pressed. - -#### Inherited from - -ViewportComponentAttributes.aria-selected - -#### Defined in - -node_modules/@types/react/index.d.ts:1866 - -___ - -### aria-setsize - -• `Optional` **aria-setsize**: `number` - -Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. - -**`See`** - -aria-posinset. - -#### Inherited from - -ViewportComponentAttributes.aria-setsize - -#### Defined in - -node_modules/@types/react/index.d.ts:1871 - -___ - -### aria-sort - -• `Optional` **aria-sort**: ``"none"`` \| ``"ascending"`` \| ``"descending"`` \| ``"other"`` - -Indicates if items in a table or grid are sorted in ascending or descending order. - -#### Inherited from - -ViewportComponentAttributes.aria-sort - -#### Defined in - -node_modules/@types/react/index.d.ts:1873 - -___ - -### aria-valuemax - -• `Optional` **aria-valuemax**: `number` - -Defines the maximum allowed value for a range widget. - -#### Inherited from - -ViewportComponentAttributes.aria-valuemax - -#### Defined in - -node_modules/@types/react/index.d.ts:1875 - -___ - -### aria-valuemin - -• `Optional` **aria-valuemin**: `number` - -Defines the minimum allowed value for a range widget. - -#### Inherited from - -ViewportComponentAttributes.aria-valuemin - -#### Defined in - -node_modules/@types/react/index.d.ts:1877 - -___ - -### aria-valuenow - -• `Optional` **aria-valuenow**: `number` - -Defines the current value for a range widget. - -**`See`** - -aria-valuetext. - -#### Inherited from - -ViewportComponentAttributes.aria-valuenow - -#### Defined in - -node_modules/@types/react/index.d.ts:1882 - -___ - -### aria-valuetext - -• `Optional` **aria-valuetext**: `string` - -Defines the human readable text alternative of aria-valuenow for a range widget. - -#### Inherited from - -ViewportComponentAttributes.aria-valuetext - -#### Defined in - -node_modules/@types/react/index.d.ts:1884 diff --git a/docs/interfaces/react.WindowVirtualizerHandle.md b/docs/interfaces/react.WindowVirtualizerHandle.md new file mode 100644 index 000000000..675e55928 --- /dev/null +++ b/docs/interfaces/react.WindowVirtualizerHandle.md @@ -0,0 +1,23 @@ +# Interface: WindowVirtualizerHandle + +[react](../modules/react.md).WindowVirtualizerHandle + +Methods of [WindowVirtualizer](../modules/react.md#windowvirtualizer). + +## Table of contents + +### Properties + +- [cache](react.WindowVirtualizerHandle.md#cache) + +## Properties + +### cache + +• `Readonly` **cache**: [`CacheSnapshot`](react.CacheSnapshot.md) + +Get current [CacheSnapshot](react.CacheSnapshot.md). + +#### Defined in + +[src/react/WindowVirtualizer.tsx:40](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L40) diff --git a/docs/interfaces/react.WindowVirtualizerProps.md b/docs/interfaces/react.WindowVirtualizerProps.md new file mode 100644 index 000000000..36bd82874 --- /dev/null +++ b/docs/interfaces/react.WindowVirtualizerProps.md @@ -0,0 +1,212 @@ +# Interface: WindowVirtualizerProps + +[react](../modules/react.md).WindowVirtualizerProps + +Props of [WindowVirtualizer](../modules/react.md#windowvirtualizer). + +## Table of contents + +### Properties + +- [children](react.WindowVirtualizerProps.md#children) +- [count](react.WindowVirtualizerProps.md#count) +- [overscan](react.WindowVirtualizerProps.md#overscan) +- [itemSize](react.WindowVirtualizerProps.md#itemsize) +- [shift](react.WindowVirtualizerProps.md#shift) +- [horizontal](react.WindowVirtualizerProps.md#horizontal) +- [cache](react.WindowVirtualizerProps.md#cache) +- [ssrCount](react.WindowVirtualizerProps.md#ssrcount) +- [as](react.WindowVirtualizerProps.md#as) +- [item](react.WindowVirtualizerProps.md#item) +- [onScrollEnd](react.WindowVirtualizerProps.md#onscrollend) +- [onRangeChange](react.WindowVirtualizerProps.md#onrangechange) + +## Properties + +### children + +• **children**: `ReactNode` \| (`index`: `number`) => `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`\>\> + +Elements rendered by this component. + +You can also pass a function and set [WindowVirtualizerProps.count](react.WindowVirtualizerProps.md#count) to create elements lazily. + +#### Defined in + +[src/react/WindowVirtualizer.tsx:52](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L52) + +___ + +### count + +• `Optional` **count**: `number` + +If you set a function to [WindowVirtualizerProps.children](react.WindowVirtualizerProps.md#children), you have to set total number of items to this prop. + +#### Defined in + +[src/react/WindowVirtualizer.tsx:56](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L56) + +___ + +### overscan + +• `Optional` **overscan**: `number` + +Number of items to render above/below the visible bounds of the list. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling. + +**`Default Value`** + +```ts +4 +``` + +#### Defined in + +[src/react/WindowVirtualizer.tsx:61](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L61) + +___ + +### itemSize + +• `Optional` **itemSize**: `number` + +Item size hint for unmeasured items. 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. + +#### Defined in + +[src/react/WindowVirtualizer.tsx:68](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L68) + +___ + +### 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. + +#### Defined in + +[src/react/WindowVirtualizer.tsx:72](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L72) + +___ + +### horizontal + +• `Optional` **horizontal**: `boolean` + +If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list. + +#### Defined in + +[src/react/WindowVirtualizer.tsx:76](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L76) + +___ + +### cache + +• `Optional` **cache**: [`CacheSnapshot`](react.CacheSnapshot.md) + +You can restore cache by passing a [CacheSnapshot](react.CacheSnapshot.md) on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from [WindowVirtualizerHandle.cache](react.WindowVirtualizerHandle.md#cache). + +#### Defined in + +[src/react/WindowVirtualizer.tsx:80](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L80) + +___ + +### 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. + +#### Defined in + +[src/react/WindowVirtualizer.tsx:84](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L84) + +___ + +### as + +• `Optional` **as**: [`CustomContainerComponent`](../modules/react.md#customcontainercomponent) \| keyof `IntrinsicElements` + +Component or element type for container element. + +**`Default Value`** + +```ts +"div" +``` + +#### Defined in + +[src/react/WindowVirtualizer.tsx:89](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L89) + +___ + +### item + +• `Optional` **item**: [`CustomItemComponent`](../modules/react.md#customitemcomponent) \| keyof `IntrinsicElements` + +Component or element type for item element. This component will get [CustomItemComponentProps](react.CustomItemComponentProps.md) as props. + +**`Default Value`** + +```ts +"div" +``` + +#### Defined in + +[src/react/WindowVirtualizer.tsx:94](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L94) + +___ + +### onScrollEnd + +• `Optional` **onScrollEnd**: () => `void` + +#### Type declaration + +▸ (): `void` + +Callback invoked when scrolling stops. + +##### Returns + +`void` + +#### Defined in + +[src/react/WindowVirtualizer.tsx:98](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L98) + +___ + +### onRangeChange + +• `Optional` **onRangeChange**: (`startIndex`: `number`, `endIndex`: `number`) => `void` + +#### Type declaration + +▸ (`startIndex`, `endIndex`): `void` + +Callback invoked when visible items range changes. + +##### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `startIndex` | `number` | The start index of viewable items. | +| `endIndex` | `number` | The end index of viewable items. | + +##### Returns + +`void` + +#### Defined in + +[src/react/WindowVirtualizer.tsx:102](https://github.com/inokawa/virtua/blob/facd0683/src/react/WindowVirtualizer.tsx#L102) diff --git a/docs/modules/react.md b/docs/modules/react.md index 9e5b355fd..1b08d7b40 100644 --- a/docs/modules/react.md +++ b/docs/modules/react.md @@ -5,7 +5,8 @@ ### Functions - [VList](react.md#vlist) -- [WVList](react.md#wvlist) +- [Virtualizer](react.md#virtualizer) +- [WindowVirtualizer](react.md#windowvirtualizer) - [experimental\_VGrid](react.md#experimental_vgrid) ### Interfaces @@ -14,21 +15,23 @@ - [ScrollToIndexOpts](../interfaces/react.ScrollToIndexOpts.md) - [VListProps](../interfaces/react.VListProps.md) - [VListHandle](../interfaces/react.VListHandle.md) -- [WVListProps](../interfaces/react.WVListProps.md) -- [WVListHandle](../interfaces/react.WVListHandle.md) +- [VirtualizerProps](../interfaces/react.VirtualizerProps.md) +- [VirtualizerHandle](../interfaces/react.VirtualizerHandle.md) +- [WindowVirtualizerProps](../interfaces/react.WindowVirtualizerProps.md) +- [WindowVirtualizerHandle](../interfaces/react.WindowVirtualizerHandle.md) - [VGridProps](../interfaces/react.VGridProps.md) - [VGridHandle](../interfaces/react.VGridHandle.md) - [CustomCellComponentProps](../interfaces/react.CustomCellComponentProps.md) -- [CustomViewportComponentProps](../interfaces/react.CustomViewportComponentProps.md) - [CustomItemComponentProps](../interfaces/react.CustomItemComponentProps.md) +- [CustomContainerComponentProps](../interfaces/react.CustomContainerComponentProps.md) ### Type Aliases - [ScrollToIndexAlign](react.md#scrolltoindexalign) - [CustomCellComponent](react.md#customcellcomponent) -- [ViewportComponentAttributes](react.md#viewportcomponentattributes) -- [CustomViewportComponent](react.md#customviewportcomponent) - [CustomItemComponent](react.md#customitemcomponent) +- [ViewportComponentAttributes](react.md#viewportcomponentattributes) +- [CustomContainerComponent](react.md#customcontainercomponent) ## Functions @@ -54,17 +57,39 @@ node_modules/@types/react/index.d.ts:393 ___ -### WVList +### Virtualizer + +▸ **Virtualizer**(`props`): `ReactNode` + +Customizable list virtualizer for advanced usage. See [VirtualizerProps](../interfaces/react.VirtualizerProps.md) and [VirtualizerHandle](../interfaces/react.VirtualizerHandle.md). + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `props` | [`VirtualizerProps`](../interfaces/react.VirtualizerProps.md) & `RefAttributes`\<[`VirtualizerHandle`](../interfaces/react.VirtualizerHandle.md)\> | + +#### Returns + +`ReactNode` + +#### Defined in + +node_modules/@types/react/index.d.ts:393 + +___ + +### WindowVirtualizer -▸ **WVList**(`props`): `ReactNode` +▸ **WindowVirtualizer**(`props`): `ReactNode` -Virtualized list component controlled by the window scrolling. See [WVListProps](../interfaces/react.WVListProps.md) and [WVListHandle](../interfaces/react.WVListHandle.md). +[Virtualizer](react.md#virtualizer) controlled by the window scrolling. See [WindowVirtualizerProps](../interfaces/react.WindowVirtualizerProps.md) and [WindowVirtualizer](react.md#windowvirtualizer). #### Parameters | Name | Type | | :------ | :------ | -| `props` | [`WVListProps`](../interfaces/react.WVListProps.md) & `RefAttributes`\<[`WVListHandle`](../interfaces/react.WVListHandle.md)\> | +| `props` | [`WindowVirtualizerProps`](../interfaces/react.WindowVirtualizerProps.md) & `RefAttributes`\<[`WindowVirtualizerHandle`](../interfaces/react.WindowVirtualizerHandle.md)\> | #### Returns @@ -104,7 +129,7 @@ node_modules/@types/react/index.d.ts:393 #### Defined in -[src/core/types.ts:11](https://github.com/inokawa/virtua/blob/de57a89c/src/core/types.ts#L11) +[src/core/types.ts:11](https://github.com/inokawa/virtua/blob/facd0683/src/core/types.ts#L11) ___ @@ -114,34 +139,34 @@ ___ #### Defined in -[src/react/VGrid.tsx:46](https://github.com/inokawa/virtua/blob/de57a89c/src/react/VGrid.tsx#L46) +[src/react/VGrid.tsx:93](https://github.com/inokawa/virtua/blob/facd0683/src/react/VGrid.tsx#L93) ___ -### ViewportComponentAttributes +### CustomItemComponent -Ƭ **ViewportComponentAttributes**: `Pick`\<`React.HTMLAttributes`\<`HTMLElement`\>, ``"className"`` \| ``"style"`` \| ``"id"`` \| ``"role"`` \| ``"tabIndex"`` \| ``"onKeyDown"``\> & `React.AriaAttributes` +Ƭ **CustomItemComponent**: `React.ForwardRefExoticComponent`\<`React.PropsWithoutRef`\<[`CustomItemComponentProps`](../interfaces/react.CustomItemComponentProps.md)\> & `React.RefAttributes`\<`any`\>\> #### Defined in -[src/react/Viewport.tsx:9](https://github.com/inokawa/virtua/blob/de57a89c/src/react/Viewport.tsx#L9) +[src/react/ListItem.tsx:23](https://github.com/inokawa/virtua/blob/facd0683/src/react/ListItem.tsx#L23) ___ -### CustomViewportComponent +### ViewportComponentAttributes -Ƭ **CustomViewportComponent**: typeof `Viewport` +Ƭ **ViewportComponentAttributes**: `Pick`\<`React.HTMLAttributes`\<`HTMLElement`\>, ``"className"`` \| ``"style"`` \| ``"id"`` \| ``"role"`` \| ``"tabIndex"`` \| ``"onKeyDown"``\> & `React.AriaAttributes` #### Defined in -[src/react/Viewport.tsx:64](https://github.com/inokawa/virtua/blob/de57a89c/src/react/Viewport.tsx#L64) +[src/react/types.ts:3](https://github.com/inokawa/virtua/blob/facd0683/src/react/types.ts#L3) ___ -### CustomItemComponent +### CustomContainerComponent -Ƭ **CustomItemComponent**: `React.ForwardRefExoticComponent`\<`React.PropsWithoutRef`\<[`CustomItemComponentProps`](../interfaces/react.CustomItemComponentProps.md)\> & `React.RefAttributes`\<`any`\>\> +Ƭ **CustomContainerComponent**: `React.ForwardRefExoticComponent`\<`React.PropsWithoutRef`\<[`CustomContainerComponentProps`](../interfaces/react.CustomContainerComponentProps.md)\> & `React.RefAttributes`\<`any`\>\> #### Defined in -[src/react/ListItem.tsx:23](https://github.com/inokawa/virtua/blob/de57a89c/src/react/ListItem.tsx#L23) +[src/react/types.ts:14](https://github.com/inokawa/virtua/blob/facd0683/src/react/types.ts#L14) diff --git a/package-lock.json b/package-lock.json index e61b3111f..cc245db06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "virtua", - "version": "0.19.2", + "version": "0.20.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "virtua", - "version": "0.19.2", + "version": "0.20.0", "license": "MIT", "devDependencies": { "@babel/plugin-transform-react-pure-annotations": "7.23.3", diff --git a/package.json b/package.json index 7a69fca21..1351c93e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "virtua", - "version": "0.19.2", + "version": "0.20.0", "description": "A zero-config, fast and small (~3kB) virtual list (and grid) component for React and Vue.", "main": "lib/index.js", "module": "lib/index.mjs",