Awesome Open Source
Awesome Open Source

React GridList

A virtual-scrolling GridList component based on CSS Grids.

  • Render anything (not just images) of a known width/height inside.
  • Variable height items in the same row.
  • Highly performant virtual scrolling (aka windowing) for buttery smoothness.
  • Customizable & Responsive.
  • Very small bundle size

Install

npm install --save react-gridlist

Example

import React from "react"
import GridList from "react-gridlist"

function getGridGap(elementWidth: number, windowHeight: number) {
  if (elementWidth > 720 && windowHeight > 480) {
    return 10
  } else {
    return 5
  }
}

function getColumnCount(elementWidth: number, gridGap: number) {
  return Math.floor((elementWidth + gridGap) / (300 + gridGap))
}

function getWindowMargin(windowHeight: number) {
  return Math.round(windowHeight * 1.5)
}

function getItemData(image: Image, columnWidth: number) {
  let imageRatio = image.height / image.width
  let adjustedHeight = Math.round(columnWidth * imageRatio)

  return {
    key: image.url,
    height: adjustedHeight,
  }
}

function Example(props) {
  return (
    <GridList
      items={props.images}
      getGridGap={getGridGap}
      getColumnCount={getColumnCount}
      getWindowMargin={getWindowMargin}
      getItemData={getItemData}
      renderItem={(image) => {
        return (
          <img
            src={image.url}
            width={image.width}
            height={image.height}
            className={styles.image}
          />
        )
      }}
    />
  )
}

Fixed Column Width

You can also pass a fixedColumnWidth to lock the columns to a specific pixel width.

<GridList
  // ...
  fixedColumnWidth={300}
/>

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,605
Css (216,557
Reactjs (72,292
List (1,963
Grid (1,298
Listview (384
Scrolling (366
Grid Layout (351
Virtual (275
Related Projects