vanilla-picker
A simple, easy to use vanilla JS color picker with alpha selection.
Last updated 5 years ago by sphinxxxx .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ gnpm install vanilla-picker 
SYNC missed versions from official npm registry.

vanilla-picker

License Version Size Downloads

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

Demo

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>

Note:

The script adds a <style> element to the page, with all the needed CSS. If your site's Content Security Policy doesn't allow that, use the CSP build with a separate CSS file instead:

import Picker from 'vanilla-picker/csp';
import 'vanilla-picker/dist/vanilla-picker.csp.css';

..or

<script src="vanilla-picker.csp.min.js"></script>
<link  href="vanilla-picker.csp.css" rel="stylesheet">

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://vanilla-picker.js.org/gen/Picker.html

Accessibility

The color picker is built to support basic keyboard navigation and use with screen readers. I would be very interested in feedback on improvements that could be done here!

Credits

License

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

Current Tags

  • 2.12.1                                ...           latest (3 years ago)

34 Versions

  • 2.12.1                                ...           3 years ago
  • 2.12.0                                ...           3 years ago
  • 2.11.2                                ...           4 years ago
  • 2.11.1                                ...           4 years ago
  • 2.11.0                                ...           4 years ago
  • 2.10.1                                ...           5 years ago
  • 2.10.0                                ...           5 years ago
  • 2.9.2                                ...           5 years ago
  • 2.9.1                                ...           5 years ago
  • 2.9.0                                ...           5 years ago
  • 2.8.2                                ...           5 years ago
  • 2.8.1                                ...           6 years ago
  • 2.8.0                                ...           6 years ago
  • 2.7.2                                ...           6 years ago
  • 2.7.1                                ...           6 years ago
  • 2.7.0                                ...           6 years ago
  • 2.6.0                                ...           6 years ago
  • 2.5.3                                ...           6 years ago
  • 2.5.2                                ...           6 years ago
  • 2.5.1                                ...           6 years ago
  • 2.5.0                                ...           6 years ago
  • 2.4.3                                ...           6 years ago
  • 2.4.2                                ...           6 years ago
  • 2.4.1                                ...           6 years ago
  • 2.4.0                                ...           6 years ago
  • 2.3.0                                ...           6 years ago
  • 2.2.1                                ...           7 years ago
  • 2.2.0                                ...           7 years ago
  • 2.1.0                                ...           7 years ago
  • 2.0.2                                ...           7 years ago
  • 2.0.1                                ...           7 years ago
  • 2.0.0                                ...           7 years ago
  • 2.0.0-alpha.8                                ...           7 years ago
  • 2.0.0-alpha.7                                ...           7 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (21)
Dependents (1)

Copyright 2013 - present © cnpmjs.org | Home |