react-window 1.8.10 → 2.0.0-alpha.0

package/docs/generated/js-docs/Grid.json

@@ -0,0 +1,314 @@
+{
+  "tags": {},
+  "filePath": "lib/components/grid/Grid.tsx",
+  "description": "",
+  "displayName": "Grid",
+  "methods": [],
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "CSS class name.",
+      "name": "className",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "string | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "string"
+          }
+        ]
+      }
+    },
+    "defaultHeight": {
+      "defaultValue": null,
+      "description": "Default height of grid for initial render.\nThis value is important for server rendering.",
+      "name": "defaultHeight",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "number | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "number"
+          }
+        ]
+      }
+    },
+    "defaultWidth": {
+      "defaultValue": null,
+      "description": "Default width of grid for initial render.\nThis value is important for server rendering.",
+      "name": "defaultWidth",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "number | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "number"
+          }
+        ]
+      }
+    },
+    "cellComponent": {
+      "defaultValue": null,
+      "description": "React component responsible for rendering a cell.\n\nThis component will receive an `index` and `style` prop by default.\nAdditionally it will receive prop values passed to `cellProps`.\n\n⚠️ The prop types for this component are exported as `GridComponentProps`",
+      "name": "cellComponent",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "(props: { columnIndex: number; rowIndex: number; style: CSSProperties; } & CellProps) => ReactNode"
+      }
+    },
+    "cellProps": {
+      "defaultValue": null,
+      "description": "Additional props to be passed to the cellComponent.\n\n⚠️ This object must not contain either an `columnIndex`, `rowIndex`, or `style` prop.",
+      "name": "cellProps",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "ExcludeForbiddenKeys<CellProps>"
+      }
+    },
+    "columnCount": {
+      "defaultValue": null,
+      "description": "Number of columns to be rendered in the grid.",
+      "name": "columnCount",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "number"
+      }
+    },
+    "columnWidth": {
+      "defaultValue": null,
+      "description": "Column width (in pixels) or a function that returns a column width (in pixels) given an index and `cellProps`.",
+      "name": "columnWidth",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "enum",
+        "raw": "number | ((index: number, cellProps: CellProps) => number)",
+        "value": [
+          {
+            "value": "number"
+          },
+          {
+            "value": "(index: number, cellProps: CellProps) => number",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          }
+        ]
+      }
+    },
+    "gridRef": {
+      "defaultValue": null,
+      "description": "Ref used to interact with this component's imperative API.\n\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\n\n⚠️ The `useGridRef` hook is exported for convenience use in TypeScript projects.",
+      "name": "gridRef",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "Ref<GridImperativeAPI> | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "null"
+          },
+          {
+            "value": "(instance: GridImperativeAPI | null) => void | (() => VoidOrUndefinedOnly)",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          },
+          {
+            "value": "RefObject<GridImperativeAPI | null>",
+            "description": "Created by {@link createRef}, or {@link useRef} when passed `null`.",
+            "fullComment": "Created by {@link createRef}, or {@link useRef} when passed `null`.\n@template T The type of the ref's value.\n@example ```tsx\nconst ref = createRef<HTMLDivElement>();\n\nref.current = document.createElement('div'); // Error\n```",
+            "tags": {
+              "template": "T The type of the ref's value.",
+              "example": "```tsx\nconst ref = createRef<HTMLDivElement>();\n\nref.current = document.createElement('div'); // Error\n```"
+            }
+          }
+        ]
+      }
+    },
+    "onCellsRendered": {
+      "defaultValue": null,
+      "description": "Callback notified when the range of rendered cells changes.",
+      "name": "onCellsRendered",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "((args: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void) | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "(args: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          }
+        ]
+      }
+    },
+    "overscanCount": {
+      "defaultValue": {
+        "value": "3"
+      },
+      "description": "How many additional rows/columns to render outside of the visible area.\nThis can reduce visual flickering near the edges of a grid when scrolling.",
+      "name": "overscanCount",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "number | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "number"
+          }
+        ]
+      }
+    },
+    "rowCount": {
+      "defaultValue": null,
+      "description": "Number of rows to be rendered in the grid.",
+      "name": "rowCount",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "number"
+      }
+    },
+    "rowHeight": {
+      "defaultValue": null,
+      "description": "Row height (in pixels) or a function that returns a row height (in pixels) given an index and `cellProps`.",
+      "name": "rowHeight",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "enum",
+        "raw": "number | ((index: number, cellProps: CellProps) => number)",
+        "value": [
+          {
+            "value": "number"
+          },
+          {
+            "value": "(index: number, cellProps: CellProps) => number",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          }
+        ]
+      }
+    },
+    "style": {
+      "defaultValue": null,
+      "description": "Optional CSS properties.\nThe grid of cells will fill the height and width defined by this style.",
+      "name": "style",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/grid/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "CSSProperties | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "CSSProperties",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          }
+        ]
+      }
+    }
+  }
+}

package/docs/generated/js-docs/List.json

@@ -0,0 +1,266 @@
+{
+  "tags": {},
+  "filePath": "lib/components/list/List.tsx",
+  "description": "",
+  "displayName": "List",
+  "methods": [],
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "CSS class name.",
+      "name": "className",
+      "parent": {
+        "fileName": "react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+        "name": "HTMLAttributes"
+      },
+      "declarations": [
+        {
+          "fileName": "react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "string | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "string"
+          }
+        ]
+      }
+    },
+    "style": {
+      "defaultValue": null,
+      "description": "Optional CSS properties.\nThe list of rows will fill the height defined by this style.",
+      "name": "style",
+      "parent": {
+        "fileName": "react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+        "name": "HTMLAttributes"
+      },
+      "declarations": [
+        {
+          "fileName": "react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "CSSProperties | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "CSSProperties",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          }
+        ]
+      }
+    },
+    "defaultHeight": {
+      "defaultValue": {
+        "value": "0"
+      },
+      "description": "Default height of list for initial render.\nThis value is important for server rendering.",
+      "name": "defaultHeight",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "number | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "number"
+          }
+        ]
+      }
+    },
+    "listRef": {
+      "defaultValue": null,
+      "description": "Ref used to interact with this component's imperative API.\n\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\n\n⚠️ The `useListRef` hook is exported for convenience use in TypeScript projects.",
+      "name": "listRef",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "Ref<ListImperativeAPI> | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "null"
+          },
+          {
+            "value": "(instance: ListImperativeAPI | null) => void | (() => VoidOrUndefinedOnly)",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          },
+          {
+            "value": "RefObject<ListImperativeAPI | null>",
+            "description": "Created by {@link createRef}, or {@link useRef} when passed `null`.",
+            "fullComment": "Created by {@link createRef}, or {@link useRef} when passed `null`.\n@template T The type of the ref's value.\n@example ```tsx\nconst ref = createRef<HTMLDivElement>();\n\nref.current = document.createElement('div'); // Error\n```",
+            "tags": {
+              "template": "T The type of the ref's value.",
+              "example": "```tsx\nconst ref = createRef<HTMLDivElement>();\n\nref.current = document.createElement('div'); // Error\n```"
+            }
+          }
+        ]
+      }
+    },
+    "rowComponent": {
+      "defaultValue": null,
+      "description": "React component responsible for rendering a row.\n\nThis component will receive an `index` and `style` prop by default.\nAdditionally it will receive prop values passed to `rowProps`.\n\n⚠️ The prop types for this component are exported as `RowComponentProps`",
+      "name": "rowComponent",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "(props: { index: number; style: CSSProperties; } & RowProps) => ReactNode"
+      }
+    },
+    "rowCount": {
+      "defaultValue": null,
+      "description": "Number of items to be rendered in the list.",
+      "name": "rowCount",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "number"
+      }
+    },
+    "rowHeight": {
+      "defaultValue": null,
+      "description": "Row height (in pixels) or a function that returns a row height (in pixels) given its index and `rowProps` data.",
+      "name": "rowHeight",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "enum",
+        "raw": "number | ((index: number, rowProps: RowProps) => number)",
+        "value": [
+          {
+            "value": "number"
+          },
+          {
+            "value": "(index: number, rowProps: RowProps) => number",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          }
+        ]
+      }
+    },
+    "rowProps": {
+      "defaultValue": null,
+      "description": "Additional props to be passed to the rowComponent.\n\n⚠️ This object must not contain either an `index` or `style` prop.",
+      "name": "rowProps",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "ExcludeForbiddenKeys<RowProps>"
+      }
+    },
+    "onRowsRendered": {
+      "defaultValue": null,
+      "description": "Callback notified when the range of visible rows changes.",
+      "name": "onRowsRendered",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "((args: { startIndex: number; stopIndex: number; }) => void) | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "(args: { startIndex: number; stopIndex: number; }) => void",
+            "description": "",
+            "fullComment": "",
+            "tags": {}
+          }
+        ]
+      }
+    },
+    "overscanCount": {
+      "defaultValue": {
+        "value": "3"
+      },
+      "description": "How many additional rows to render outside of the visible area.\nThis can reduce visual flickering near the edges of a list when scrolling.",
+      "name": "overscanCount",
+      "declarations": [
+        {
+          "fileName": "react-window/lib/components/list/types.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "number | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "number"
+          }
+        ]
+      }
+    }
+  }
+}

package/docs/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>react-window | render everything</title>
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      property="og:title"
+      content="react-window: React components for rendering large lists and grids"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://react-window.vercel.app/" />
+    <!-- Update URL after v2 merge -->
+    <meta
+      property="og:image"
+      content="https://react-window-git-issues-821-brian-vaughns-projects.vercel.app/og.png"
+    />
+    <meta property="og:image:width" content="1500" />
+    <meta property="og:image:height" content="500" />
+    <script type="module" crossorigin src="/assets/index-fVOw1dKb.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DlGpNu0r.css">
+  </head>
+  <body>
+    <div id="root"></div>
+
+  </body>
+</html>

package/docs/og.html

@@ -0,0 +1,42 @@
+<html>
+  <head>
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <style type="text/tailwindcss">
+      main {
+        width: 1200px;
+        height: 630px;
+        /*
+        background-image: linear-gradient(to right bottom, #34d399 0%, #0ea5e9 30%, #6e11b0 70%, #ec4899 100%);
+        background-image: linear-gradient(to right, #34d399 0%, #0ea5e9 50%, #ec4899 100%);
+        */
+        background-image: linear-gradient(to right, #0ea5e9 0%, #34d399 100%);
+      }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+
+    <script>
+      function savePageAsPng() {
+        const captureElement = document.getElementById("capture-area"); // Or document.body for the whole page
+
+        html2canvas(captureElement).then((canvas) => {
+          const imageData = canvas.toDataURL("image/png"); // Get data URL in PNG format
+          const link = document.createElement("a");
+          link.download = "webpage-screenshot.png"; // Set desired filename
+          link.href = imageData;
+          link.click(); // Programmatically click the link to trigger download
+        });
+      }
+    </script>
+  </head>
+  <body class="p-4">
+    <main
+      class="flex flex-col items-center justify-center gap-10"
+      id="capture-area"
+    >
+      <div class="text-8xl text-black font-bold">react-window</div>
+      <div class="text-7xl text-white">render everything</div>
+    </main>
+  </body>
+</html>