React MUI Virtuoso List in Typescript

React Virtuoso allows to efficiently handle large data sets using virtualized rendering. The following example demonstrates how to use react-virtuoso with the Material UI List component, showcasing its implementation in TypeScript.

import React from "react";
import { Virtuoso } from "react-virtuoso";

import {
  Avatar,
  List,
  ListItem,
  ListItemAvatar,
  ListItemProps,
  ListItemText,
  ListProps,
} from "@mui/material/";

const components = {
  List: React.forwardRef<HTMLDivElement>(({ style, children }: ListProps<"div">, listRef) => {
    return (
      <List style={{ padding: 0, ...style, margin: 0 }} component="div" ref={listRef}>
        {children}
      </List>
    );
  }),

  Item: ({ children, ...props }: ListItemProps<"div">) => {
    return (
      <ListItem component="div" {...props} style={{ margin: 0 }}>
        {children}
      </ListItem>
    );
  },
};

type Props = {
  data: {
    name: string;
    logoURI: string;
    address: string;
  }[];
};

export function VirtualizedList({ data }: Props) {
  return (
    <Virtuoso
      style={{ height: 400 }}
      components={components}
      totalCount={data.length}
      itemContent={(index) => {
        const user = data[index];
        return (
          <>
            <ListItemAvatar>
              <Avatar alt={user.name} src={user.logoURI} />
            </ListItemAvatar>
            <ListItemText primary={user.name} secondary={user.address} />
          </>
        );
      }}
    />
  );
}