0.0.25 • Published 3 days ago
react-responsive-virtual-grid v0.0.25
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
andtransform: 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 definedheight
Usage
import React from 'react'
import VirtualGrid from 'react-responsive-virtual-grid'
const Item = ({ style, index, scrolling, readyInViewport }) => (
<div style={{ backgroundColor: 'gainsboro', ...style }}>
<img
src={`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>
)
const App = ({ ...props }) => (
<VirtualGrid
total={4000}
cell={{ height: 304, width: 160 }} // `width` is a `minWidth`, because the grid is reponsive (optional if you just want a list)
child={Item}
viewportRowOffset={10} // 5 on top, 5 on bottom
onRender={children => console.log(children)} // maybe useful callback
/>
)
Checkout example/src/Apps.js
for full example with header
, footer
, inside a div
container with margin
License
MIT © thcolin
0.0.25
3 days ago
0.0.24
1 month ago
0.0.23
2 months ago
0.0.22
1 year ago
0.0.20
2 years ago
0.0.21
2 years ago
0.0.14
2 years ago
0.0.15
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.18
2 years ago
0.0.19
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago