@mierak/react-virtualized-grid v0.0.5-ALPHA

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

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.