## File: README.md `react-window` is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from React DevTools to the Replay browser. ## Support If you like this project there are several ways to support it: - [Become a GitHub sponsor](https://github.com/sponsors/bvaughn/) - [Become an Open Collective sponsor](https://opencollective.com/react-window#sponsor) - or [buy me a coffee](http://givebrian.coffee/) The following wonderful companies and individuals have sponsored react-window: [](https://opencollective.com/react-window/sponsor/0/website) [](https://opencollective.com/react-window/sponsor/1/website) [](https://opencollective.com/react-window/sponsor/2/website) [](https://opencollective.com/react-window/sponsor/3/website) [](https://opencollective.com/react-window/sponsor/4/website) [](https://opencollective.com/react-window/sponsor/5/website) [](https://opencollective.com/react-window/sponsor/6/website) [](https://opencollective.com/react-window/sponsor/7/website) [](https://opencollective.com/react-window/sponsor/8/website) [](https://opencollective.com/react-window/sponsor/9/website) [](https://opencollective.com/react-window/sponsor/10/website) [](https://opencollective.com/react-window/sponsor/11/website) [](https://opencollective.com/react-window/sponsor/12/website) [](https://opencollective.com/react-window/sponsor/13/website) [](https://opencollective.com/react-window/sponsor/14/website) [](https://opencollective.com/react-window/sponsor/15/website) [](https://opencollective.com/react-window/sponsor/16/website) [](https://opencollective.com/react-window/sponsor/17/website) [](https://opencollective.com/react-window/sponsor/18/website) [](https://opencollective.com/react-window/sponsor/19/website) [](https://opencollective.com/react-window/sponsor/20/website) [](https://opencollective.com/react-window/sponsor/21/website) [](https://opencollective.com/react-window/sponsor/22/website) [](https://opencollective.com/react-window/sponsor/23/website) [](https://opencollective.com/react-window/sponsor/24/website) [](https://opencollective.com/react-window/sponsor/25/website) [](https://opencollective.com/react-window/sponsor/26/website) [](https://opencollective.com/react-window/sponsor/27/website) [](https://opencollective.com/react-window/sponsor/28/website) [](https://opencollective.com/react-window/sponsor/29/website) [](https://opencollective.com/react-window/backer/0/website) [](https://opencollective.com/react-window/backer/1/website) [](https://opencollective.com/react-window/backer/2/website) [](https://opencollective.com/react-window/backer/3/website) [](https://opencollective.com/react-window/backer/4/website) [](https://opencollective.com/react-window/backer/5/website) [](https://opencollective.com/react-window/backer/6/website) [](https://opencollective.com/react-window/backer/7/website) [](https://opencollective.com/react-window/backer/8/website) [](https://opencollective.com/react-window/backer/9/website) [](https://opencollective.com/react-window/backer/10/website) [](https://opencollective.com/react-window/backer/11/website) [](https://opencollective.com/react-window/backer/12/website) [](https://opencollective.com/react-window/backer/13/website) [](https://opencollective.com/react-window/backer/14/website) [](https://opencollective.com/react-window/backer/15/website) [](https://opencollective.com/react-window/backer/16/website) [](https://opencollective.com/react-window/backer/17/website) [](https://opencollective.com/react-window/backer/18/website) [](https://opencollective.com/react-window/backer/19/website) [](https://opencollective.com/react-window/backer/20/website) [](https://opencollective.com/react-window/backer/21/website) [](https://opencollective.com/react-window/backer/22/website) [](https://opencollective.com/react-window/backer/23/website) [](https://opencollective.com/react-window/backer/24/website) [](https://opencollective.com/react-window/backer/25/website) [](https://opencollective.com/react-window/backer/26/website) [](https://opencollective.com/react-window/backer/27/website) [](https://opencollective.com/react-window/backer/28/website) [](https://opencollective.com/react-window/backer/29/website) ## Installation Begin by installing the library from NPM: ```sh npm install react-window ``` ## TypeScript types TypeScript definitions are included within the published `dist` folder ## FAQs Frequently asked questions can be found [here](https://react-window.vercel.app/common-questions). ## Documentation Documentation for this project is available at [react-window.vercel.app](https://react-window.vercel.app/); version 1.x documentation can be found at [react-window-v1.vercel.app](https://react-window-v1.vercel.app/). ### List Renders data with many rows. #### Required props | Name | Description | | --- | --- | | rowComponent | React component responsible for rendering a row. This component will receive an `index` and `style` prop by default. Additionally it will receive prop values passed to `rowProps`. ℹ️ The prop types for this component are exported as `RowComponentProps` | | rowCount | Number of items to be rendered in the list. | | rowHeight | Row height; the following formats are supported: number of pixels (number) percentage of the grid's current height (string) function that returns the row height (in pixels) given an index and `cellProps` dynamic row height cache returned by the `useDynamicRowHeight` hook ⚠️ Dynamic row heights are not as efficient as predetermined sizes. It's recommended to provide your own height values if they can be determined ahead of time. | | rowProps | Additional props to be passed to the row-rendering component. List will automatically re-render rows when values in this object change. ⚠️ This object must not contain `ariaAttributes`, `index`, or `style` props. | #### Optional props | Name | Description | | --- | --- | | className | CSS class name. | | style | Optional CSS properties. The list of rows will fill the height defined by this style. | | children | Additional content to be rendered within the list (above cells). This property can be used to render things like overlays or tooltips. | | defaultHeight | Default height of list for initial render. This value is important for server rendering. | | listRef | Ref used to interact with this component's imperative API. This API has imperative methods for scrolling and a getter for the outermost DOM element. ℹ️ The `useListRef` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects. | | onResize | Callback notified when the List's outermost HTMLElement resizes. This may be used to (re)scroll a row into view. | | onRowsRendered | Callback notified when the range of visible rows changes. | | overscanCount | How many additional rows to render outside of the visible area. This can reduce visual flickering near the edges of a list when scrolling. | | rowKey | Lists use the row index as a `key` by default. This prop can provide a custom `key` value. ℹ️ Custom keys can ensure better UX for sortable or filterable lists, particularly if your row components are stateful. Refer to the [React documentation](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) for more info. ⚠️ This prop cannot be auto-memoized because it is called during render. It is important to always `useCallback` for this prop; do not use an inline function. | | tagName | Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root. ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed. | ### Grid Renders data with many rows and columns. ℹ️ Unlike `List` rows, `Grid` cell sizes must be known ahead of time. Either static sizes or something that can be derived (from the data in `CellProps`) without rendering. #### Required props | Name | Description | | --- | --- | | cellComponent | React component responsible for rendering a cell. This component will receive an `index` and `style` prop by default. Additionally it will receive prop values passed to `cellProps`. ℹ️ The prop types for this component are exported as `CellComponentProps` | | cellProps | Additional props to be passed to the cell-rendering component. Grid will automatically re-render cells when values in this object change. ⚠️ This object must not contain `ariaAttributes`, `columnIndex`, `rowIndex`, or `style` props. | | columnCount | Number of columns to be rendered in the grid. | | columnWidth | Column width; the following formats are supported: number of pixels (number) percentage of the grid's current width (string) function that returns the column width (in pixels) given an index and `cellProps` | | rowCount | Number of rows to be rendered in the grid. | | rowHeight | Row height; the following formats are supported: number of pixels (number) percentage of the grid's current height (string) function that returns the row height (in pixels) given an index and `cellProps` | #### Optional props | Name | Description | | --- | --- | | className | CSS class name. | | dir | Indicates the directionality of grid cells. ℹ️ See HTML `dir` [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir) for more information. | | style | Optional CSS properties. The grid of cells will fill the height and width defined by this style. | | children | Additional content to be rendered within the grid (above cells). This property can be used to render things like overlays or tooltips. | | columnKey | Grids use the column index as a `key` by default. This prop can be used along with the `rowKey` prop to provide a custom `key` value. ℹ️ Custom keys can ensure better UX for sortable or filterable grids, particularly if your cell components are stateful. Refer to the [React documentation](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) for more info. ⚠️ This prop cannot be auto-memoized because it is called during render. It is important to always `useCallback` for this prop; do not use an inline function. | | defaultHeight | Default height of grid for initial render. This value is important for server rendering. | | defaultWidth | Default width of grid for initial render. This value is important for server rendering. | | gridRef | Imperative Grid API. ℹ️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects. | | onCellsRendered | Callback notified when the range of rendered cells changes. | | onResize | Callback notified when the Grid's outermost HTMLElement resizes. This may be used to (re)scroll a cell into view. | | overscanCount | How many additional rows/columns to render outside of the visible area. This can reduce visual flickering near the edges of a grid when scrolling. | | rowKey | Grids use the row index as a `key` by default. This prop can be used along with the `columnKey` prop to provide a custom `key` value. ℹ️ Custom keys can ensure better UX for sortable or filterable grids, particularly if your cell components are stateful. Refer to the [React documentation](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) for more info. ⚠️ This prop cannot be auto-memoized because it is called during render. It is important to always `useCallback` for this prop; do not use an inline function. | | tagName | Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root. ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed. | --- ## File: integrations/vite/README.md # React + TypeScript + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh ## Expanding the ESLint configuration If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: ```js export default tseslint.config({ extends: [ // Remove ...tseslint.configs.recommended and replace with this ...tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules ...tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules ...tseslint.configs.stylisticTypeChecked ], languageOptions: { // other options... parserOptions: { project: ["./tsconfig.node.json", "./tsconfig.app.json"], tsconfigRootDir: import.meta.dirname } } }); ``` You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: ```js // eslint.config.js import reactX from "eslint-plugin-react-x"; import reactDom from "eslint-plugin-react-dom"; export default tseslint.config({ plugins: { // Add the react-x and react-dom plugins "react-x": reactX, "react-dom": reactDom }, rules: { // other rules... // Enable its recommended typescript rules ...reactX.configs["recommended-typescript"].rules, ...reactDom.configs.recommended.rules } }); ``` --- ## File: integrations/vike/README.md Generated with [vike.dev/new](https://vike.dev/new) ([version 531](https://www.npmjs.com/package/create-vike/v/0.0.531)) using this command: ```sh npm create vike@latest --- --react --tailwindcss ``` ## Contents - [Vike](#vike) - [Plus files](#plus-files) - [Routing](#routing) - [SSR](#ssr) - [HTML Streaming](#html-streaming) ## Vike This app is ready to start. It's powered by [Vike](https://vike.dev) and [React](https://react.dev/learn). ### Plus files [The + files are the interface](https://vike.dev/config) between Vike and your code. - [`+config.ts`](https://vike.dev/settings) — Settings (e.g. ``) - [`+Page.tsx`](https://vike.dev/Page) — The `` component - [`+data.ts`](https://vike.dev/data) — Fetching data (for your `` component) - [`+Layout.tsx`](https://vike.dev/Layout) — The `<Layout>` component (wraps your `` components) - [`+Head.tsx`](https://vike.dev/Head) - Sets `<head>` tags - [`/pages/_error/+Page.tsx`](https://vike.dev/error-page) — The error page (rendered when an error occurs) - [`+onPageTransitionStart.ts`](https://vike.dev/onPageTransitionStart) and `+onPageTransitionEnd.ts` — For page transition animations ### Routing [Vike's built-in router](https://vike.dev/routing) lets you choose between: - [Filesystem Routing](https://vike.dev/filesystem-routing) (the URL of a page is determined based on where its `+Page.jsx` file is located on the filesystem) - [Route Strings](https://vike.dev/route-string) - [Route Functions](https://vike.dev/route-function) ### SSR SSR is enabled by default. You can [disable it](https://vike.dev/ssr) for all or specific pages. ### HTML Streaming You can [enable/disable HTML streaming](https://vike.dev/stream) for all or specific pages. --- ## File: integrations/next/README.md This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). ## Getting Started First, run the development server: ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.