huyansheng3 / rc-photo-grid

like the google search photo grid! just use css.

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