import { List } from "@quantum_box/react";

<List
  containerHeight={600}
  itemHeight={100}
  data={data}
  nextData={() => someFunctionThatGeneratesData(100)}
  Item={({ itemData, itemKey }) => (
    <div>
      key: {itemKey}
      <span>
        user: {itemData["username"]}, email: {itemdata["email"]}
      </span>
    </div>
  )}
/>;

import { Grid } from "@quantum_box/react";

<Grid
  containerHeight={600}
  itemHeight={200}
  itemWidth={200}
  rowItems={4}
  data={data}
  nextData={() => someFunctionThatGeneratesData(100)}
  Item={({ itemData, itemKey }) => (
    <div>
      key: {itemKey}
      <span>
        user: {itemData["username"]}, email: {itemdata["email"]}
      </span>
    </div>
  )}
/>;

import { Tree } from "@quantum_box/react";

<Tree
  containerHeight={600}
  itemHeight={44}
  indent={20}
  data={data}
  Item={({ id, isLeaf, isOpen, toggle, nestingLevel, itemData }) => (
    <span>{id}</span>
  )}
/>;