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
;; { return <VirtualizedCSSGrid containerWidth=1080 rowHeight=240 columnWidth=360 columns=3 listLength=itemslength> items </VirtualizedCSSGrid> ;}
Functional Stateless Component
;; { return <VirtualizedCSSGrid containerWidth=1080 rowHeight=240 columnWidth=360 columns=3 listLength=itemslength> items </VirtualizedCSSGrid> ; }
Props
children
children
is required and must be provided as an array within the <VirtualizedCSSGrid />
component.
<VirtualizedCSSGrid containerWidth=1080 rowHeight=240 columnWidth=360 columns=3 listLength=itemslength> items</VirtualizedCSSGrid>
className
If className
is provided, it will be attached to the outermost Grid div
.
{ return <VirtualizedItemGrid className="my-grid-class" containerWidth=1080 rowHeight=240 columnWidth=360 columns=3 listLength=itemslength />;}
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
.
{ return containerWidth;} { return <VirtualizedCSSGrid containerWidth=getContainerWidth rowHeight=240 columnWidth=360 columns=3 listLength=itemslength />;}
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.
{ return rowHeight;} { return <VirtualizedCSSGrid containerWidth=1080 rowHeight=getRowHeight columnWidth=360 columns=3 listLength=itemslength />;}
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.
{ return columnWidth;} { return <VirtualizedCSSGrid containerWidth=1080 rowHeight=240 columnWidth=getColumnWidth columns=3 listLength=itemslength />;}
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.
{ return columns;} { return <VirtualizedCSSGrid containerWidth=1080 rowHeight=240 columnWidth=360 columns=getColumns listLength=itemslength />;}
listLength
listLength
is required and must be a number or a function which returns a number.
It represents the total number of elements provided.
{ return listLength;} { return <VirtualizedCSSGrid containerWidth=1080 rowHeight=240 columnWidth=360 columns=3 listLength=getListLength />;}