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
{ if elementWidth > 720 && windowHeight > 480 return 10 else return 5 } { return Math} { return Math} { let imageRatio = imageheight / imagewidth let adjustedHeight = Math return key: imageurl height: adjustedHeight } { return <GridList items=propsimages getGridGap=getGridGap getColumnCount=getColumnCount getWindowMargin=getWindowMargin getItemData=getItemData renderItem= { return <img src=imageurl width=imagewidth height=imageheight className=stylesimage /> } /> }
Fixed Column Width
You can also pass a fixedColumnWidth
to lock the columns to a specific pixel
width.
<GridList // ... fixedColumnWidth=300/>