vanilla-picker

What is vanilla-picker?

The vanilla-picker npm package is a lightweight, zero-dependency color picker for web applications. It provides a simple and intuitive interface for users to select colors, and it can be easily integrated into any web project.

What are vanilla-picker's main functionalities?

Basic Color Picker

This code initializes a basic color picker and attaches it to the body of the document. Users can interact with the picker to select a color.

const picker = new Picker({ parent: document.body });

Custom Color Picker Position

This code initializes a color picker and positions the popup at the top of the parent element. The 'popup' option allows customization of the picker's position.

const picker = new Picker({ parent: document.body, popup: 'top' });

Color Change Event

This code initializes a color picker and sets up an event listener for color changes. When the user selects a new color, the color's RGBA string is logged to the console.

const picker = new Picker({ parent: document.body }); picker.onChange = function(color) { console.log(color.rgbaString); };

Initial Color

This code initializes a color picker with an initial color set to red (#ff0000). The 'color' option allows setting a default color when the picker is first displayed.

const picker = new Picker({ parent: document.body, color: '#ff0000' });

Other packages similar to vanilla-picker

react-color

react-color is a collection of color pickers for React applications. It offers a variety of color picker components, such as Sketch, Photoshop, and Chrome pickers. Compared to vanilla-picker, react-color is specifically designed for React and provides more diverse picker styles.

tinycolor2

tinycolor2 is a color manipulation and conversion library. While it does not provide a UI for color picking, it offers extensive functions for color conversion, manipulation, and comparison. It can be used alongside vanilla-picker for more advanced color operations.

spectrum-colorpicker

spectrum-colorpicker is a jQuery-based color picker plugin. It provides a customizable and feature-rich color picker UI. Compared to vanilla-picker, spectrum-colorpicker requires jQuery and offers more configuration options and themes.

README

vanilla-picker

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

• Based on https://github.com/dissimulate/Picker by Adam Brooks
• Built with https://github.com/Joudee/color-conversion by Joudee
• Built with https://gist.github.com/mjackson/5311256 by Michael Jackson

License

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