repository·main·Indexed 12 days ago
https://github.com/bvaughn/react-windowA React component library for high-performance rendering of large lists and grids using virtualization. Version 2.3.0 provides List and Grid components to prevent performance degradation when dealing with massive datasets, featuring support for dynamic sizes, overscanning, and an imperative API for programmatic scrolling.
Vike provides built-in support for Server-Side Rendering (SSR) and HTML Streaming:
Vike uses a convention of + prefixed files to define the interface between the Vike framework and your application code. These files control configuration, data fetching, and component rendering.
Key + files include:
+config.ts: Defines application settings (e.g., <title>).+Page.tsx: The main component for a page.+data.ts: Logic for fetching data required by the +Page.tsx component.+Layout.tsx: A component that wraps your +Page.tsx components.+Head.tsx: Used to set <head> tags.+onPageTransitionStart.ts and +onPageTransitionEnd.ts: Hooks for managing page transition animations./pages/_error/+Page.tsx: The specialized component rendered when an error occurs.Vike provides three built-in routing mechanisms to determine how URLs map to your application components:
+Page.tsx file within the filesystem.dist folder of the package.To use react-window in your project, install the package using npm:
npm install react-windowFor production applications, it is recommended to enable type-aware lint rules by updating your ESLint configuration. Replace tseslint.configs.recommended with tseslint.configs.recommendedTypeChecked, tseslint.configs.strictTypeChecked, or tseslint.configs.stylisticTypeChecked. You must also configure parserOptions to point to your tsconfig files.
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
}
}
});To add React-specific linting, install eslint-plugin-react-x and eslint-plugin-react-dom. Register them in the plugins object of your eslint.config.js and spread their recommended rules into the rules object.
// 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
}
});You can bootstrap a new Vike project with React and TailwindCSS using the following command:
npm create vike@latest --- --react --tailwindcssTo start the development environment for this Next.js project, run the development command using your preferred package manager. Once started, the application will be available at http://localhost:3000.
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devBy default, react-window uses the index as the key. For better performance and UX in sortable or filterable grids (especially with stateful cell components), you can provide custom keys using columnKey and rowKey.
Important: These functions are called during render and cannot be auto-memoized. You must wrap them in useCallback to avoid performance degradation.
const columnKey = useCallback(({ columnIndex, data, rowIndex }: any) => {
return `col-${columnIndex}-${rowIndex}`;
}, []);
<Grid
columnKey={columnKey}
{/* ... */}
/>The Grid component renders large datasets organized into rows and columns using virtualization. Unlike the List component, Grid requires that cell sizes (row height and column width) are known ahead of time or can be derived from data without rendering. It uses absolute positioning to place cells within a scrollable container.
import { Grid } from 'react-window';
// Example usage concept
<Grid
columnCount={100}
rowCount={100}
columnWidth={150}
rowHeight={50}
cellComponent={MyCellComponent}
cellProps={{ someData: data }}
/>The List component renders data with many rows. It requires a component to render each row, the total number of rows, and the height of each row.
rowComponent: A React component responsible for rendering a row. It receives index and style props by default, plus any props passed via rowProps. The prop types are exported as RowComponentProps.rowCount: Total number of items to be rendered.rowHeight: The height of each row. Supported formats:number (pixels)string (percentage of the grid's current height)function (returns pixel height given an index and cellProps)useDynamicRowHeight hook.rowProps: Additional props passed to the rowComponent. The List re-renders rows when this object changes. Warning: Do not include ariaAttributes, index, or style in this object.rowKey: Custom key for rows. Use this for better UX in sortable/filterable lists. Important: Always wrap this in useCallback; do not use an inline function.listRef: Ref to interact with the imperative API (scrolling and getting the outermost DOM element). Use useListRef or useListCallbackRef in TypeScript.overscanCount: Number of additional rows to render outside the visible area to reduce flickering.onRowsRendered: Callback triggered when the range of visible rows changes.