Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamiebuilds/react-gridlist
A virtual-scrolling GridList component based on CSS Grids
https://github.com/jamiebuilds/react-gridlist
css grid grid-layout list listview react scrolling virtual windowing
Last synced: 15 days ago
JSON representation
A virtual-scrolling GridList component based on CSS Grids
- Host: GitHub
- URL: https://github.com/jamiebuilds/react-gridlist
- Owner: jamiebuilds
- License: mit
- Created: 2020-03-30T07:32:08.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-14T21:54:13.000Z (over 3 years ago)
- Last Synced: 2024-09-19T13:37:32.691Z (about 2 months ago)
- Topics: css, grid, grid-layout, list, listview, react, scrolling, virtual, windowing
- Language: TypeScript
- Homepage: https://jamiebuilds.github.io/react-gridlist
- Size: 1.15 MB
- Stars: 425
- Watchers: 6
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-gridlist - scrolling GridList component based on CSS Grids | jamiebuilds | 402 | (TypeScript)
README
# 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](https://bundlephobia.com/result?p=react-gridlist)
## 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 (
{
return (
)
}}
/>
)
}
```
## Fixed Column Width
You can also pass a `fixedColumnWidth` to lock the columns to a specific pixel
width.
```js
```