JSPM

  • Created
  • Published
  • Downloads 317242
  • Score
    100M100P100Q180386F
  • License ISC

A simple, easy to use vanilla JS color picker with alpha selection.

Package Exports

  • vanilla-picker
  • vanilla-picker/dist/vanilla-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vanilla-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vanilla-picker

A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.

Demo

https://rawgit.com/Sphinxxxx/vanilla-picker/master/demo/index.html
https://codepen.io/Sphinxxxx/pen/zRmKBX

Getting Started

Installing

  • For the pros:

    • npm install vanilla-picker --save
    • import Picker from 'vanilla-picker';
  • For the rest of us:

<script src="https://unpkg.com/vanilla-picker@2"></script>

Usage

<div id="parent">Click me</div>

<script>

    /*
        Create a new Picker instance and set the parent element.
        By default, the color picker is a popup which appears when you click the parent.
    */
    var parent = document.querySelector('#parent');
    var picker = new Picker(parent);

    /*
        You can do what you want with the chosen color using two callbacks: onChange and onDone.
    */
    picker.onChange = function(color) {
        parent.style.background = color.rgbaString;
    };

    /* onDone is similar to onChange, but only called when you click 'Ok' */

</script>

API and advanced options

https://rawgit.com/Sphinxxxx/vanilla-picker/master/docs/gen/Picker.html

Credits

License

The ISC license - see the LICENSE.md file for details.