A react gallery picker
JavaScript CSS Other
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci
example
src
test
.babelrc
.browserlistrc
.eslintrc.json
.flowconfig
.gitignore
.npmignore
CHANGELOG.md
CONTRIBUTING.md
LICENSE.md
Makefile
README.md
package.json
yarn.lock

README.md

Ars Arsenal

A gallery picker


CircleCI Code Climate


Example

Installation

npm install --save ars-arsenal

Styles

Ars Arsenal ships with a stylesheet. The easiest way to include it is by importing it from the node_modules folder:

/* Sass stylesheet: */
@import "./node_modules/ars-arsenal/style/ars-arsenal.scss"
/* or CSS: */
@import "./node_modules/ars-arsenal/style.css"

Icons

Copy over icons from ./example/public/icons to your public directory.

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"

  // Configure the root element's HTML attributes. default = {}
  rootAttributes: {
    className: 'my-custom-class another-custom-class',
    'data-test': 'my-integration-selector-helper'
  },

  url: 'photo/resource/endpoint',

  // How to display the items. Can be "table" or "gallery"
  mode: 'gallery',

  // What table columns to display, and in what order
  columns: ['id', 'name', 'caption', 'attribution', 'preview'],

  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.