react-responsive-virtual-grid

💀🚟 Dead-simple react virtual grid library that act like a normal <div>, checkout example

Install

npm install --save react-responsive-virtual-grid
# or
yarn add react-responsive-virtual-grid

Features

• Responsive Grid (rows/columns)
• Virtual cells, render only when visible on the viewport
• Positioned visible cells with position: absolute and transform: translate3d(x, y, 0)
• Build with React hooks, don't re-render if it's not necessary
• Resize with the window
• Act like a normal <div> with only defined height

Usage

importReactfrom'react'importVirtualGridfrom'react-responsive-virtual-grid'constItem=({ style, index, scrolling, readyInViewport })=>(<divstyle={{backgroundColor: 'gainsboro', ...style}}><imgsrc={`https://picsum.photos/id/${index}/304/160`}alt={`Pcisum placeholder #${index}${scrolling ? ' - scrolling' : ''}${readyInViewport ? ' - readyInViewport' : ''}`}style={{objectFit: 'cover'}}width='100%'height='100%'loading='lazy'/></div>)constApp=({ ...props})=>(<VirtualGridtotal={4000}cell={{height: 304,width: 160}}// `width` is a `minWidth`, because the grid is reponsive (optional if you just want a list)child={Item}viewportOffset={10}// 5 on top, 5 on bottomonRender={children=>console.log(children)}// maybe useful callbackscrollDirection='vertical'/>)

Checkout example/src/Apps.js for full example with header, footer, inside a divcontainer with margin

License

MIT © thcolin