hub / github.com/bvaughn/react-window

github.com/bvaughn/react-window @2.2.7 sqlite

repository ↗ · DeepWiki ↗ · release 2.2.7 ↗

204 symbols 520 edges 177 files 3 documented · 1%

README

react-window logo

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:

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 notif

Extension points exported contracts — how you extend this code

GridImperativeAPI (Interface)

(no doc)

lib/components/grid/types.ts

EncodedListElement (Interface)

(no doc)

integrations/tests/src/utils/serializer/types.ts

ListImperativeAPI (Interface)

(no doc)

lib/components/list/types.ts

EncodedRowComponentElement (Interface)

(no doc)

integrations/tests/src/utils/serializer/types.ts

EncodedTextElement (Interface)

(no doc)

integrations/tests/src/utils/serializer/types.ts

Core symbols most depended-on inside this repo

useDynamicRowHeight

called by 14

lib/components/list/useDynamicRowHeight.ts

useVirtualizer

called by 13

lib/core/useVirtualizer.ts

assert

called by 11

lib/utils/assert.ts

parseNumericStyleValue

called by 11

lib/utils/parseNumericStyleValue.ts

createCachedBounds

called by 11

lib/core/createCachedBounds.ts

setElementSize

called by 9

lib/utils/test/mockResizeObserver.ts

useResizeObserver

called by 9

lib/hooks/useResizeObserver.ts

shallowCompare

called by 8

lib/utils/shallowCompare.ts

Shape

Function 190

Method 7

Interface 5

Class 2

Languages

TypeScript100%

Modules by API surface

lib/utils/test/mockResizeObserver.ts13 symbols

lib/components/list/List.test.tsx7 symbols

lib/components/grid/Grid.tsx5 symbols

lib/components/grid/Grid.test.tsx5 symbols

integrations/tests/src/utils/serializer/encode.ts5 symbols

integrations/tests/src/utils/serializer/decode.ts5 symbols

src/routes/list/examples/ListVariableRowHeights.tsx4 symbols

src/routes/ScratchpadRoute.tsx4 symbols

src/routes/HowDoesItWorkRoute.tsx4 symbols

lib/core/createCachedBounds.ts4 symbols

lib/components/list/List.tsx3 symbols

integrations/tests/src/utils/serializer/types.ts3 symbols

Used by 51 indexed graphs manifest dependencies, hub-wide

github.com/4ian/GDevelop

github.com/AdguardTeam/AdguardBrowserExtension

github.com/AndrewWalsh/openapi-devtools

github.com/Avaiga/taipy

github.com/CherryHQ/cherry-studio

github.com/HuolalaTech/page-spy-web

github.com/OHIF/Viewers

github.com/OpenCut-app/OpenCut

github.com/Significant-Gravitas/AutoGPT

github.com/TriliumNext/Trilium

… +41 more

Dependencies from manifests, versioned

@csstools/postcss-oklab-function4.0.11 · 1×

@eslint/js9.30.1 · 1×

@headlessui/react2.2.4 · 1×

@headlessui/tailwindcss0.2.2 · 1×

@heroicons/react2.2.0 · 1×

@playwright/test1 · 1×

@tailwindcss/postcss4 · 1×

@tailwindcss/vite4.1.11 · 1×

@tailwindplus/elements1.0.5 · 1×

@testing-library/jest-dom6.6.4 · 1×

@testing-library/react16.3.0 · 1×

@testing-library/user-event14.6.1 · 1×

For agents

$ claude mcp add react-window \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact