0.1.36 • Published 4 years ago
dreamgrid v0.1.36
dreamgrid
responsive react image grid component that respects aspect ratios https://withintheruins14.github.io/dreamgrid
Install
# Yarn
yarn add dreamgrid
# NPM
npm install --save dreamgrid
masonry | dreamgrid | |
---|---|---|
preserves aspect ratios | ✅ | |
allows variable item widths | ✅ | |
deterministic | ✅ | |
virtualized | ✅ | |
memoized | ✅ |
Usage
const images = [
{
height: 679, // you can pass a ratio for height and width if you don't have them
width: 1024, // eg. { height: 2, width: 3 } or { height: 1, width: 1 }
url: 'https://live.staticflickr.com/7837/46852208034_1f768a633c_b_d.jpg'
},
{
height: 1024,
width: 679,
url: 'https://live.staticflickr.com/7856/46660570565_dd7cb62cd0_b_d.jpg'
},
{
height: 1024,
width: 679,
url: 'https://live.staticflickr.com/7856/46660570565_dd7cb62cd0_b_d.jpg'
}
};
const renderItem = (style, image) => (<img src={image.url} style={style} />);
Hooks (coming soon!)
import { useGrid } from 'dreamgrid';
const Grid = useGrid(
images,
size,
minimumRowHeight,
maximumRowHeight,
renderItem
);
return (<Grid />);
Component
import DreamGrid from 'dreamgrid';
return (
<DreamGrid
images={images}
size={{ height: 300, width: 600 }}
minimumRowHeight={180}
maximumRowHeight={350}
renderItem={renderItem}
/>
);
Learn more at: https://withintheruins14.github.io/dreamgrid
License
MIT © withintheruins14
0.1.36
4 years ago
0.1.35
4 years ago
0.1.34
4 years ago
0.1.33
4 years ago
0.1.32
4 years ago
0.1.31
4 years ago
0.1.27
4 years ago
0.1.26
4 years ago
0.1.25
4 years ago
0.1.24
4 years ago
0.1.23
4 years ago
0.1.22
4 years ago
0.1.21
4 years ago
0.1.20
4 years ago
0.1.19
4 years ago
0.1.18
4 years ago
0.1.17
4 years ago
0.1.16
4 years ago
0.1.15
4 years ago
0.1.14
4 years ago
0.1.13
4 years ago
0.1.12
4 years ago
0.1.11
4 years ago
0.1.10
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
5 years ago