React Virtualized CSS Grid

> React Virtualized CSS Grid is a React component for efficiently rendering a large, scrollable list of items while utilizing CSS Grid. Inspired by react-virtualized to render a virtualized grid of an arbitrary number of rows and columns based on the provided row and container heights to calculate and generate virtualized list items.

Demo

TBD

Installation

``
npm i react-virtualized-cssgrid
`

Usage

$3

`js
import React from 'react';
import VirtualizedCSSGrid from 'react-virtualized-cssgrid';

function MyList({ items }) {
return (

{items.map(el => (
https://hiring.verkada.com/thumbs/${el}.jpg} style={{ width: 360 }} />
))}

);
}
`

$3

`js
import React from 'react';
import VirtualizedCSSGrid from 'react-virtualized-cssgrid';

class List extends Component {
render() {
return (

{items.map(el => (
https://hiring.verkada.com/thumbs/${el}.jpg} style={{ width: 360 }} />
))}

);
}
}
`

Props

$3

children is required and must be provided as an array within the component.

`js

{items.map(el => (
https://hiring.verkada.com/thumbs/${el}.jpg} style={{ width: 360 }} />
))}

`

$3

If className is provided, it will be attached to the outermost Grid div.

`js
function MyList({ items }) {
return ;
}
`

$3

className is required and must be a number or a function which returns a number.

It represents the max width of the outermost grid container div.

`js
function getContainerWidth({ containerWidth }) {
return containerWidth;
}

function MyList() {
return ;
}
`

$3

rowHeight is required and must be a number or a function which returns a number.

It represents the row height of each grid row, which will also represent the height a single grid element.

`js
function getRowHeight({ rowHeight }) {
return rowHeight;
}

function MyList({ items }) {
return ;
}
`

$3

columnWidth is required and must be a number or a function which returns a number.

It represents the column width of each grid column, which will also represent the width a single grid element.

`js
function getColumnWidth({ columnWidth }) {
return columnWidth;
}

function MyList({ items }) {
return ;
}
`

$3

columns is required and must be a number or a function which returns a number.

It represents the number of columns provided in each row container.

`js
function getColumns({ columns }) {
return columns;
}

function MyList({ items }) {
return ;
}
`

$3

listLength is required and must be a number or a function which returns a number.

It represents the total number of elements provided.

`js
function getListLength({ listLength }) {
return listLength;
}

function MyList({ items }) {
return ;
}
``