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