react-window Documentation

React components for efficiently rendering large lists and tabular data

17,173 stars TypeScript TypeScript 1 file · ~4,309 tokens
RAW Doc

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:

The following wonderful companies and individuals have sponsored react-window:

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.

Documentation

Documentation for this project is available at react-window.vercel.app; version 1.x documentation can be found at 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 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 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 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 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:

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 and 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 (version 531) using this command:

sh
npm create vike@latest --- --react --tailwindcss

Contents

Vike

This app is ready to start. It's powered by Vike and React.

Plus files

The + files are the interface between Vike and your code.

Routing

Vike's built-in router lets you choose between:

SSR

SSR is enabled by default. You can disable it for all or specific pages.

HTML Streaming

You can enable/disable HTML streaming for all or specific pages.

File: integrations/next/README.md

This is a Next.js project bootstrapped with 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 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 to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →