0.1.36 • Published 4 years ago

dreamgrid v0.1.36

Weekly downloads
24
License
MIT
Repository
github
Last release
4 years ago

dreamgrid

responsive react image grid component that respects aspect ratios https://withintheruins14.github.io/dreamgrid

NPM JavaScript Style Guide

Install

# Yarn
yarn add dreamgrid

# NPM
npm install --save dreamgrid
masonrydreamgrid
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