Skip to content

thcolin/react-responsive-virtual-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

62 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-responsive-virtual-grid

πŸ’€πŸšŸ Dead-simple react virtual grid library that act like a normal <div>, checkout example

NPM JavaScript Style Guide

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

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}
    viewportOffset={10} // 5 on top, 5 on bottom
    onRender={children => console.log(children)} // maybe useful callback
    scrollDirection='vertical'
  />
)

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

License

MIT Β© thcolin

About

πŸ’€πŸšŸ Dead-simple react responsive virtual grid library

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published