💀🚟 Dead-simple react responsive virtual grid library
npm install react-responsive-virtual-grid> 💀🚟 Dead-simple react virtual grid library that act like a normal   `` * Responsive Grid (rows/columns) const Item = ({ style, index, scrolling, readyInViewport }) => ( const App = ({ ...props }) => ( Checkout MIT © thcolin, checkout exampleInstall
bash`
npm install --save react-responsive-virtual-gridor
yarn add react-responsive-virtual-gridFeatures
* Virtual cells, render only when visible on the viewport
* Positioned visible cells with position: absolute and transform: translate3d(x, y, 0)
* Build with React , don't re-render if it's not necessary
* Resize with the window
* Act like a normal with only defined heightUsage
jsxwidth
import React from 'react'
import VirtualGrid from 'react-responsive-virtual-grid'
}Pcisum placeholder #${index}${scrolling ? ' - scrolling' : ''}${readyInViewport ? ' - readyInViewport' : ''}
alt={}
style={{ objectFit: 'cover' }}
width='100%'
height='100%'
loading='lazy'
/>
)
cell={{ height: 304, width: 160 }} // is a minWidth, because the grid is reponsive (optional if you just want a list)`
child={Item}
viewportOffset={10} // 5 on top, 5 on bottom
onRender={children => console.log(children)} // maybe useful callback
scrollDirection='vertical'
/>
) for full example with header, footer, inside a div _container_ with margin`License