@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

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

containerHeight={600}
itemHeight={100}
data={data}
nextData={() => someFunctionThatGeneratesData(100)}
Item={({ itemData, itemKey }) => (



)}
/>;
`

Grid component

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

containerHeight={600}
itemHeight={200}
itemWidth={200}
rowItems={4}
data={data}
nextData={() => someFunctionThatGeneratesData(100)}
Item={({ itemData, itemKey }) => (



)}
/>;
`

Tree component

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

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

See official docs for
examples and props description