
Security News
Feross on Risky Business Weekly Podcast: npm’s Ongoing Supply Chain Attacks
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
vanilla-picker
Advanced tools
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.
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' });
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 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 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.
A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.
https://codepen.io/Sphinxxxx/pen/zRmKBX
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">
<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>
https://vanilla-picker.js.org/gen/Picker.html
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!
The ISC license - see the LICENSE.md file for details.
[2.12.3] - 2024-03-23
"types"
in package.json
.FAQs
A simple, easy to use vanilla JS color picker with alpha selection.
The npm package vanilla-picker receives a total of 236,260 weekly downloads. As such, vanilla-picker popularity was classified as popular.
We found that vanilla-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.