Napoleonic Political Magnificence
    Wondering what’s next for npm?Check out our public roadmap! »

    vanilla-picker
    TypeScript icon, indicating that this package has built-in type declarations

    2.11.2 • 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

    112,696

    Version

    2.11.2

    License

    ISC

    Unpacked Size

    143 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar