react-responsive-virtual-grid

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

Install

1npm install --save react-responsive-virtual-grid
2# or
3yarn 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

1import React from 'react'
2import VirtualGrid from 'react-responsive-virtual-grid'
3
4const Item = ({ style, index, scrolling, readyInViewport }) => (
5  <div style={{ backgroundColor: 'gainsboro', ...style }}>
6    <img
7      src={`https://picsum.photos/id/${index}/304/160`}
8      alt={`Pcisum placeholder #${index}${scrolling ? ' - scrolling' : ''}${readyInViewport ? ' - readyInViewport' : ''}`}
9      style={{ objectFit: 'cover' }}
10      width='100%'
11      height='100%'
12      loading='lazy'
13    />
14  </div>
15)
16
17const App = ({ ...props }) => (
18  <VirtualGrid
19    total={4000}
20    cell={{ height: 304, width: 160 }} // `width` is a `minWidth`, because the grid is reponsive (optional if you just want a list)
21    child={Item}
22    viewportRowOffset={10} // 5 on top, 5 on bottom
23    onRender={children => console.log(children)} // maybe useful callback
24  />
25)

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

License

MIT © thcolin