@mierak/react-virtualized-grid
TypeScript icon, indicating that this package has built-in type declarations

0.0.5-ALPHA • Public • Published

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

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.

Package Sidebar

Install

npm i @mierak/react-virtualized-grid

Weekly Downloads

68

Version

0.0.5-ALPHA

License

MIT

Unpacked Size

16.9 kB

Total Files

13

Last publish

Collaborators

  • mierak