Skip to content

jamiebuilds/react-gridlist

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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}
/>