mierak / react-virtualized-grid

A simple and configurable virtualized grid to display a large number of element

React Virtualized Grid

A simple layout component written using CSS Grid. Can be used to display a very large number of elements in a grid. This works by rendering only elements that are currently on the screen and a small portion before and after.

Features

• A Simple CSS Grid to display a huge number of elements
• Almost identical performance for 10, 100 or 1 000 000 elements
• Responsive
• Zero dependency
• Written in Typescript

Installation

npm i @mierak/react-virtualized-grid

Usage

import React from 'react';
import { VirtualizedGrid } from '@mierak/react-virtualized-grid';

export default () => {
	const elements = [...new Array(100000)].map((_, index) => index);

	return (
		<VirtualizedGrid itemCount={elements.length} rowHeight={50} cellWidth={100} gridHeight={300}>
			{(index) => <div>{elements[index]}</div>}
		</VirtualizedGrid>
	);
};

Preview

API

Name	Description	Type	Default	Required?
children	A callback function used to render your elements	(index: number, rowIndex: number, columnIndex: number) => React.ReactNode	---	Yes
itemCount	Total count of items you want to display	number	---	Yes
rowHeight	Height of a single row in the grid	number	---	Yes
cellWidth	Width of a single cell in the grid	number	---	Yes
debounceDelay	Time to wait before rendering elements after a scroll event in milliseconds	number	300	No
prerenderScreens	Screens of elements to prerender to prevent blinking	number	3	No
gridGap	grid-gap CSS property	number	0	No
gridHeight	The height of the grid container. You can supply a number in px or a string as a CSS property, e.g. "calc(100% - 200px)"	number | string	"100vh"	No
className	Your css class names to be added to grid container. Also servers for Styled components compatibility	number	---	No

Notes

You can use any of the parameters passed in the children callback to render your elements. Suggested way is to simply use an index. If you use rowIndex and columnIndex you must take care not to skip any cells in the resulting grid as it will cause it to malfunction.

Limitations

• All elements must have equal size
• Currently there is no inbuilt way to render previews before element gets rendered after scrolling

Licence

React Virtualized Grid is release under MIT licence.