Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

vanilla-picker

2.11.0 • Public • Published

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>

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.

Install

npm i vanilla-picker

DownloadsWeekly Downloads

87,730

Version

2.11.0

License

ISC

Unpacked Size

142 kB

Total Files

17

Last publish

Collaborators

  • avatar