react-virtual-css-grid
Extremely fast and lightweight virtual CSSGrid(also used as list) for React
This project is currently alpha, but already has support for most CSSGrid vertical possibilities. I intend to keep it simple to use and extremely performant.
Install
yarn
yarn add react-virtual-css-grid
npm
npm i react-virtual-css-grid
Importing on your project
ES6
OldSchool
var VirtualCSSGrid = ;
Usage
It can be as simple as:
<VirtualCSSGrid nItems=100 renderGridItem=thisrenderGridItem />
But some default values are recommended as shown in this basic example
; Component // considering we will be adding lots of rows, // lets set some default height for the container style { return height:"100vh" textAlign:"center" } // The Grid is generated inside the container, we can setup some CSSGrid style // feel free to play with these and tell me what happened! { return gridGap:"5px 0px" padding:"10px" justifyContent:"space-evenly" gridTemplateColumns:"20% repeat(auto-fill, 200px) 20%" } // sample grid item renderer // // this will just get the item position and put inside a div // you might want to use this to get actual data // from a list and print neat components // // considering you provided a given nItems value // position is the item "index" corresponding to a certain scroll // columnPosition is the position of that iten's column on the grid // rowPosition is the position of that iten's row on the grid // scrollRatio is the current scroll ratio from 0 to 1 { // defining some styles for the grid item // only gridRowStart and gridColumnStart will be overwritten let style = alignSelf:"center" background:`#d0d0d0` height:"100%" alignContent:"center" display:"grid" // returning one div as gridItem return <div style=style key=position> position </div> } { return <div> <VirtualCSSGrid // the function that renders each gridItem // required renderGridItem=thisrenderGridItem // how many itens we have on our grid // required nItems=100 // some optional fields: // the container style (recommended) style=this // the grid style (goes as a div and child of the container) // also recommended gridStyle=this /> </div> ; } ;
You can try to use this as your "App" component for your create-react-app starter kit to check the results and tweak parameters.
CSSGrid properties support
Currently this project is focused on vertical virtual grids. The grid-template-columns property allows us to create amazing layouts and grids, auto generating rows according to how many items we can show at any given time. Try out using settings like grid-template-columns:repeat(auto-fill, 150px);
as part of your grid style and behold fluid columns that beautifully fill the rows.
Resize support
CSSGrid is more fun when you can take advantage of the flexibility it provides when it comes to changing the grid dimensions. Making it thinner might decrease the number of columns or making it wider might create room for more of them. If you want to use CSSGrid properties that change dynamically the number of rows and columns, The ResizableVirtualCSSGrid is for you.
; Component // considering we will be adding lots of rows, // lets set some default height for the container style { return height:"100vh" textAlign:"center" } // sample grid item renderer { let style = alignSelf:"center" background:`#d0d0d0` height:"90px" alignContent:"center" display:"grid" return <div style=style key=position> position </div> } { return gridGap:"10px 5px" gridTemplateColumns:"10% repeat(auto-fill, minmax(100px, 1fr)) 20%" padding:"10px" } { return <div> <ResizableVirtualCSSGrid renderGridItem=thisrenderGridItem nItems=1000 style=this gridStyle=this /> </div> ; } ;
It trades off some performance to keep track of the resize and trigger render gridItems when it happens, but it is necessary as we are showing only the necessary number of items to fill the current visible grid area (which might give back to you A LOT more performance).
to-dos
- documment the usage options here
- investigate even further how much we can infer from both grid and container css
- find out if caching or render prevention techniques improve resize performance
- setup some demos