React Virtualization with CSS Grid
npm install react-virtualized-cssgridreact-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.
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 ;
}
``