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

``sh
npm install --save react-gridlist
`

Example

`js
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 (
items={props.images}
getGridGap={getGridGap}
getColumnCount={getColumnCount}
getWindowMargin={getWindowMargin}
getItemData={getItemData}
renderItem={(image) => {
return (
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.

`js
// ...
fixedColumnWidth={300}
/>
``