# 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
### Functional Stateless Component
```js
import React from 'react';
import VirtualizedCSSGrid from 'react-virtualized-cssgrid';
function MyList({ items }) {
return (
{items.map(el => (
))}
);
}
```
### Functional Stateless Component
```js
import React from 'react';
import VirtualizedCSSGrid from 'react-virtualized-cssgrid';
class List extends Component {
render() {
return (
{items.map(el => (
))}
);
}
}
```
## Props
### `children`
`children` is required and must be provided as an array within the `` component.
```js
{items.map(el => (
))}
```
### `className`
If `className` is provided, it will be attached to the outermost Grid `div`.
```js
function MyList({ items }) {
return ;
}
```
### `containerWidth`
`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 ;
}
```
### `rowHeight`
`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 ;
}
```
### `columnWidth`
`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 ;
}
```
### `columns`
`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 ;
}
```
### `listLength`
`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 ;
}
```