@types/react-window

What is @types/react-window?

The @types/react-window package provides TypeScript type definitions for react-window, a library that efficiently renders large lists and tabular data. It helps in enhancing performance by only rendering items that are currently visible within the viewport, thus reducing the amount of DOM nodes created at any given time. This package is essential for TypeScript developers using react-window to ensure type safety and to leverage IntelliSense in their IDE.

What are @types/react-window's main functionalities?

FixedSizeList

FixedSizeList is used for rendering large lists where each item has the same size. It requires specifying the height and width of the list container, the item count, and the item size.

import { FixedSizeList as List } from 'react-window';

function Row({ index, style }) {
  return <div style={style}>Row {index}</div>;
}

function Example() {
  return (
    <List
      height={150}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}

VariableSizeList

VariableSizeList is similar to FixedSizeList but allows for items of varying sizes. It requires a function `itemSize` that returns the size of an item given its index.

import { VariableSizeList as List } from 'react-window';

function Row({ index, style }) {
  return <div style={style}>Row {index}</div>;
}

function Example() {
  const getItemSize = index => (index % 2 === 0 ? 50 : 25);

  return (
    <List
      height={150}
      itemCount={1000}
      itemSize={getItemSize}
      width={300}
    >
      {Row}
    </List>
  );
}

Other packages similar to @types/react-window

react-virtualized

react-virtualized is another library for efficiently rendering large lists and tabular data. It offers a wider range of components and features compared to react-window, such as table, grid, and masonry layouts, but it might be heavier in terms of bundle size.

react-infinite

react-infinite is focused on providing an infinite scrolling experience for large lists of data. While it does not offer the same level of customization and optimization for tabular data as react-window, it's a good choice for simpler use cases requiring infinite scroll capabilities.

README

Installation

npm install --save @types/react-window

Summary

This package contains type definitions for react-window (https://github.com/bvaughn/react-window/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-window.

Additional Details

• Last updated: Tue, 07 Nov 2023 09:09:39 GMT
• Dependencies: @types/react

Credits

These definitions were written by Martynas Kadiša, Alex Guerra, and John Gozde.