react-box-virtualization

React component for the optimized rendering of large datasets by custom positioning and virtualization.

React box virtualizer works by only rendering part of a large datasets.

1. It reduces the memory footprint by avoiding the over-allocation of DOM nodes.
2. It reduces the CPU load by avoiding, calculating positions, and rendering all boxes immediately.

Below you can find a small diagram which is reflected the impact of react box virtualization. Only boxes whose coordinates in the viewport are will be rendered.

Install

# Yarn
yarn add react-box-virtualization

# NPM
npm install --save react-box-virtualization

Usage

1. Import box virtualizer component

import { BoxVirtualizer } from 'react-box-virtualization';

2. Create a variable which is responsible for mapping properties from your object to box props

const coordinatesMap = {
    x: 'xVal',
    y: 'yVal',
    width: 'widthVal',
    height: 'heightVal'
};

Here is the interface of typescript for this prop

interface ICoordinatesMap {
    x: string;
    y: string;
    width: string;
    height: string;
    opacity?: string;
    isVisible?: boolean;
    zIndex?: number;
}

3. Add BoxVirtualizer component to your JSX code

<BoxVirtualizer
    coordinatesMap={coordinatesMap}
    data={dataset}
    isVirtualized={true}
    boxGap={20}
    visualizableContent={VisualizableContent}
/>

Supported props of BoxVirtualizer component

| Prop name | Description | Type | Default value | Required | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------- | ------------- | -------- | | data | Array of objects | any[] | - | yes | | coordinatesMap | Map object for mapping data item property to CSS visual property | ICoordinatesMap | - | yes | | visualizableContent | React component which will receive data item object as props | React.FC | - | yes | | isVirtualized | In case of false value, rendering of boxes will work with a lazy render concept which means each box will be rendered one time | boolean | true | no | | viewportHeight | Height of viewport can be all CSS acceptable units for the height property | string | '100%' | no | | viewportWidth | Width of viewport can be all CSS acceptable units for the width property | string | '100%' | no | | boxGap | Gap between boxes can be all CSS acceptable units for the padding property | number | 0 | no |

Demos

Here's a boxes with random positions and sizes Code Sandbox demo rendered by lazy render concept. (Dataset size 1.000.000 boxes) Here's a boxes with grid layout Code Sandbox demo rendered by virtualization concept. (Dataset size 100.000 boxes)

License

MIT Licensed © 2022 Hamik25