vanilla-picker
A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.
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>