@quantum_box/react

Overview

React components for data virtualization

What's virtualization ? Only a subset of data of a bigger dataset gets exposed to the user. It is later discarded in favor of a new content. User experiences continuity through smooth scrolling and at the same time great load is taken off of your CPU as the browser needs to render only a handful of elements at a time instead of let's say hundreds or thousands of them. It may be an overkill for limited lists with relatively little amount of data to display, however, as it's gets bigger and bigger then virtualization effectively solves the problem.

List component

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>
  )}
/>;

Grid component

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>
  )}
/>;

Tree component

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>
  )}
/>;

See official docs for examples and props description