https://github.com/ctxhou/react-image-list

simple way to show image list in react
https://github.com/ctxhou/react-image-list

Last synced: 10 months ago
JSON representation

simple way to show image list in react

• Host: GitHub
• URL: https://github.com/ctxhou/react-image-list
• Owner: ctxhou
• Created: 2015-09-24T06:04:42.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-07-08T11:38:38.000Z (almost 10 years ago)
• Last Synced: 2025-08-09T14:30:44.819Z (10 months ago)
• Language: JavaScript
• Homepage: http://ctxhou.github.io/react-image-list/
• Size: 231 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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: , 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 (

      


        

      

    )

  }

})

```


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)