virtua 0.16.2 → 0.16.4

package/lib/react/VGrid.d.ts

@@ -80,7 +80,7 @@ export interface VGridProps extends ViewportComponentAttributes {
      */
     cellWidth?: number;
     /**
-     * Number of items to render above/below the visible bounds of the grid. You can increase to avoid showing blank items in fast scrolling.
+     * Number of items to render above/below the visible bounds of the grid. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
      * @defaultValue 2
      */
     overscan?: number;

package/lib/react/VList.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CustomViewportComponent, ViewportComponentAttributes } from "./Viewport";
 import { CustomItemComponent } from "./ListItem";
 import { CacheSnapshot, ScrollToIndexOpts } from "../core/types";
@@ -46,10 +46,16 @@ export interface VListHandle {
 export interface VListProps extends ViewportComponentAttributes {
     /**
      * Elements rendered by this component.
+     *
+     * You can also pass a function and set {@link VListProps.count} to create elements lazily.
+     */
+    children: ReactNode | ((index: number) => ReactElement);
+    /**
+     * If you set a function to {@link VListProps.children}, you have to set total number of items to this prop.
      */
-    children: ReactNode;
+    count?: number;
     /**
-     * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
+     * 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.
      * @defaultValue 4
      */
     overscan?: number;

package/lib/react/WVList.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CacheSnapshot } from "../core/types";
 import { CustomViewportComponent, ViewportComponentAttributes } from "./Viewport";
 import { CustomItemComponent } from "./ListItem";
@@ -18,10 +18,16 @@ export interface WVListHandle {
 export interface WVListProps extends ViewportComponentAttributes {
     /**
      * Elements rendered by this component.
+     *
+     * You can also pass a function and set {@link WVListProps.count} to create elements lazily.
+     */
+    children: ReactNode | ((index: number) => ReactElement);
+    /**
+     * If you set a function to {@link WVListProps.children}, you have to set total number of items to this prop.
      */
-    children: ReactNode;
+    count?: number;
     /**
-     * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
+     * 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.
      * @defaultValue 4
      */
     overscan?: number;

package/lib/react/useChildren.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement, ReactNode } from "react";
+import { ItemElement } from "./utils";
+export declare const useChildren: (children: ReactNode | ((i: number) => ReactElement), count: number | undefined) => [(i: number) => ItemElement, number];

package/lib/react/utils.d.ts

@@ -2,11 +2,10 @@ import { ReactElement, ReactFragment, ReactNode } from "react";
 import { ScrollDirection } from "../core/store";
 export declare const refKey = "current";
 export declare const emptyComponents: {};
-type ItemElement = ReactElement | ReactFragment | string | number;
+export type ItemElement = ReactElement | ReactFragment | string | number;
 export declare const flattenChildren: (children: ReactNode) => ItemElement[];
 export type MayHaveKey = {
     key?: React.Key;
 };
 export declare const clampStartIndex: (startIndex: number, overscan: number, scrollDirection: ScrollDirection) => number;
 export declare const clampEndIndex: (endIndex: number, overscan: number, scrollDirection: ScrollDirection, count: number) => number;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtua",
-  "version": "0.16.2",
+  "version": "0.16.4",
   "description": "A zero-config, fast and small (~3kB) virtual list (and grid) component for React.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",