# rc-photo-grid

> A React component photo-grid like google search photo grid!

Latest version **1.0.4** (published 2018-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-photo-grid
pnpm add rc-photo-grid
yarn add rc-photo-grid
bun add rc-photo-grid
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-03-15 |
| First published | 2018-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 68.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | hys |
| Maintainers | huyansheng3 |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/rc-photo-grid
- Repository: https://github.com/huyansheng3/rc-photo-grid
- Homepage: https://github.com/huyansheng3/rc-photo-grid#readme
- Issues: https://github.com/huyansheng3/rc-photo-grid/issues
- npm.io page: https://npm.io/package/rc-photo-grid

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1

## Recent versions

- 1.0.4 (latest) — 2018-03-15
- 1.0.3 — 2018-03-14
- 1.0.2 — 2018-03-13
- 1.0.1 — 2018-03-13
- 1.0.0 — 2018-03-13

## README

# React photo-grid

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

## A React component photo-grid like google search photo grid! inspired by the [blog](https://github.com/xieranmaya/blog/issues/4)

![demo](https://github.com/huyansheng3/react-photo-grid/raw/master/show.gif)

[live demo](https://huyansheng3.github.io/rc-photo-grid/index.html)

## 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

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo

---
_Source: https://npm.io/package/rc-photo-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._