purejs-color-picker
v1.0.2
Published
A Simple Color-picker for any type of JavaScript project with RGB and Hexadecimal color models.
Downloads
1,022
Maintainers
Readme
Pure Js Color Picker
A Simple Color-picker for any type of JavaScript project with RGB and Hexadecimal color models.
Zero dependency - Build with pure JavaScript without any dependency
Customization - Open color picker with your own size, position and closing control
Demo
Watch the video below for a demonstration
https://www.canva.com/design/DAF63Yn2LHQ/watch
Try the live demo at:
Installation & Usage
npm install purejs-color-picker
Use in Code
import showColorPicker from "..."; // relative path
// import showColorPicker from "purejs-color-picker"; // In bundler environment like in React App
const colorPicker = document.getElementById("colorPicker");
colorPicker.addEventListener("click", (event) => {
// To show color picker just call showColorPicker function by passing an object with properties as required
showColorPicker({
color: event.target.style.background || "rgb(255,0,0)", // Default color
handler: (color) => { // On Color Change handler
event.target.style.background = color;
},
pickerStyle: event.target, // Pass an HTML element to open picker based on element position OR inline style for picker
});
});
Links:
- GitHub Repository - PureJs-Color-Picker
- Home Page - PureJs Color Picker on NKS CODING LEARNINGS