# react-image-list

> react image list

Latest version **0.5.0** (published 2016-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-image-list
pnpm add react-image-list
yarn add react-image-list
bun add react-image-list
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2016-07-08 |
| First published | 2015-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | ctxhou |
| Maintainers | ctxhou |
| Keywords | react, image, react-image, react-image-list, react-component |

## Links

- npm: https://www.npmjs.com/package/react-image-list
- Repository: https://github.com/ctxhou/react-image-list
- Homepage: https://github.com/ctxhou/react-image-list#readme
- Issues: https://github.com/ctxhou/react-image-list/issues
- npm.io page: https://npm.io/package/react-image-list

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2016-07-08
- 0.4.0 — 2015-12-25
- 0.3.0 — 2015-12-25
- 0.2.2 — 2015-12-06
- 0.2.1 — 2015-12-06
- 0.2.0 — 2015-12-05
- 0.0.4 — 2015-10-09
- 0.0.3 — 2015-09-30
- 0.0.2 — 2015-09-29
- 0.0.1 — 2015-09-24

## README

# react-image-list

simple way to show image list in react 

### Demo

[demo](http://ctxhou.github.io/react-image-list/)

## Props

| Property | type   | default           | required | description                                                          |
|----------|--------|-------------------|----------|----------------------------------------------------------------------|
| imageData     | object | n/a               | yes      | the data of your image ; format:  [ {url: <img url>, name: "name"} ] |
| gridClass  | string | col col-4 px2 py2 | no       | set the grid class name                                              |
| imgClass | string | imageList__img    | no       | set the image class name                                             |

## Example

data: 
    
```js
var data = [
  {
    url: "http://fakeimg.pl/200/?text=img1",
    name: "img1"
  },
  {
    url: "http://fakeimg.pl/200/?text=img2",
    name: "img2"
  },
  {
    url: "http://fakeimg.pl/200/?text=img3",
    name: "img3"
  },
  {
    url: "http://fakeimg.pl/200/?text=img4",
    name: "img4"
  },
  {
    url: "http://fakeimg.pl/200/?text=img5",
    name: "img5"
  }
]
```

js:

```js
var ImageList = require('react-image-list');

var App = React.createClass({
  render: function() {
    return (
      <div>
        <ImageList imageData={data}
                    wrapperClass="wrapper"
                    gridClass="col-md-3"
                    imgClass="responsive"/>
      </div>
    )
  }
})
```

If you want to use the same style as the demo page, clone this [css](https://github.com/ctxhou/react-image-list/blob/master/dist/react-image-list.css).

## Development

    npm install
    npm start
    npm run build:lib


## todo

more flexible

## License

MIT [@ctxhou](github.com/ctxhou)

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