React Virtualized CSS Grid is a React component for efficiently rendering a large, scrollable list of items while utilizing CSS Grid. Inspired by
react-virtualizedto 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.
TBD
npm i react-virtualized-cssgrid function MyList({ items }) { return ( <VirtualizedCSSGrid containerWidth={1080} rowHeight={240} columnWidth={360} columns={3} listLength={items.length}> {items.map(el => ( <img key={el} src={`https://hiring.verkada.com/thumbs/${el}.jpg`} style={{ width: 360 }} /> ))} </VirtualizedCSSGrid> ); }class List extends Component { render() { return ( <VirtualizedCSSGrid containerWidth={1080} rowHeight={240} columnWidth={360} columns={3} listLength={items.length}> {items.map(el => ( <img key={el} src={`https://hiring.verkada.com/thumbs/${el}.jpg`} style={{ width: 360 }} /> ))} </VirtualizedCSSGrid> ); } }children is required and must be provided as an array within the <VirtualizedCSSGrid /> component.
<VirtualizedCSSGrid containerWidth={1080} rowHeight={240} columnWidth={360} columns={3} listLength={items.length}> {items.map(el => ( <img key={el} src={`https://hiring.verkada.com/thumbs/${el}.jpg`} style={{ width: 360 }} /> ))} </VirtualizedCSSGrid>If className is provided, it will be attached to the outermost Grid div.
function MyList({ items }) { return <VirtualizedItemGrid className="my-grid-class" containerWidth={1080} rowHeight={240} columnWidth={360} columns={3} listLength={items.length} />; }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.
function getContainerWidth({ containerWidth }) { return containerWidth; } function MyList() { return <VirtualizedCSSGrid containerWidth={getContainerWidth} rowHeight={240} columnWidth={360} columns={3} listLength={items.length} />; }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.
function getRowHeight({ rowHeight }) { return rowHeight; } function MyList({ items }) { return <VirtualizedCSSGrid containerWidth={1080} rowHeight={getRowHeight} columnWidth={360} columns={3} listLength={items.length} />; }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.
function getColumnWidth({ columnWidth }) { return columnWidth; } function MyList({ items }) { return <VirtualizedCSSGrid containerWidth={1080} rowHeight={240} columnWidth={getColumnWidth} columns={3} listLength={items.length} />; }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.
function getColumns({ columns }) { return columns; } function MyList({ items }) { return <VirtualizedCSSGrid containerWidth={1080} rowHeight={240} columnWidth={360} columns={getColumns} listLength={items.length} />; }listLength is required and must be a number or a function which returns a number.
It represents the total number of elements provided.
function getListLength({ listLength }) { return listLength; } function MyList({ items }) { return <VirtualizedCSSGrid containerWidth={1080} rowHeight={240} columnWidth={360} columns={3} listLength={getListLength} />; }