A react gallery picker
JavaScript CSS Makefile HTML
Latest commit 66aaeff Nov 14, 2016 @nhunzaker nhunzaker 2.2.0
Permalink
Failed to load latest commit information.
example
src
test [add] Karma test runner. General test coverage improvement Jan 10, 2015
.babelrc Upgrade to React 15.x Jul 20, 2016
.coveralls.yml [add] Coveralls Jan 13, 2015
.gitignore [add] Build to gitignore May 13, 2015
.jshintignore [add] JSHint for code climate Jan 13, 2015
.jshintrc [add] JSHint for code climate Jan 13, 2015
.npmignore
.travis.yml
CHANGELOG.md Do not fetch on NaN Nov 14, 2016
CONTRIBUTING.md Add CONTRIBUTING document Nov 14, 2016
LICENSE.md [update] Project settings May 13, 2015
Makefile [update] Improve cases when captions and titles are missing May 13, 2015
README.md
karma.conf.js Fully update all tests and modules for React 0.14 Nov 13, 2015
package.json
webpack.config.js

README.md

Ars Arsenal

A gallery picker


Build Status Code Climate Coverage Status


Example

Usage

var ArsArsenal = require('ars-arsenal')

var app = document.getElementById('app')

ArsArsenal.render(app, {

  resource: 'photo', // the noun used for selection, i.e. "Pick a photo"

  url: 'photo/resource/endpoint',

  multiselect: false,

  makeURL: function (url, id) {
    // define how the endpoint url is constructed
    if (id) {
      return url + "/" + id
    }

    return url
  },

  makeQuery: function (term) {
    // define how the search query string is built
    return "q=" + term
  },

  onError: function(response) {
    // format errors before they are sent as a "string" value
    // to the component
    return response.code + ": " + response.message
  },

  onFetch: function (response) {
    // format the response, useful if you do not control the JSON
    // response from your endpoint
    return data
  },

  onChange: function (id) {
    // Whenever a new item is picked, this event is triggered
    console.log("The value was changed to %s", id)
  }

})

Response format

[
  {
    "id": 1,
    "attribution": "League of Legends",
    "name": "Alistar",
    "caption": "Lorem ipsum dolor sit amet",
    "url": "images/alistar.jpg"
  },
  //...
]

See example!

Contributing

Setup

npm install -d
npm start

Code At Viget

Visit code.viget.com to see more projects from Viget.