React photo-grid

A React component photo-grid like google search photo grid! inspired by the blog

live demo

API

PhotoGrid props

| name | description | type | default | | ------ | ----------------- | --------------------------------------------------------------------- | ------- | | photos | photo list | Array[String] or Arrary[{url: String, width: Number, height: Number}] | [] | | unit | photo height unit | Number | 200 |

you can install by run npm i --save rc-photo-grid

example:

const cats = [
  {
    "url": "photo-103450229.jpg",
    "width": 675,
    "height": 900
  },
  {
    "url": "photo-108273877.jpg",
    "width": 1170,
    "height": 780
  },
  {
    "url": "photo-115203323.jpg",
    "width": 1170,
    "height": 780
  },
]

class Demo1 extends Component {
  render() {
    const photos = cats.map(
      cat => 'https://xieranmaya.github.io/images/cats/' + cat.url
    )
    return (
      <div>
        <h1>photo-grid Demo with url</h1>
        <PhotoGrid photos={photos} />
      </div>
    )
  }
}

Licensed

MIT