Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
simple-color-picker
Advanced tools
Readme
Simple Color picker.
You can simply install it via NPM
Or use UNPKG CDN to load it as an UMD module, ready to be used in your browser.
<script src="https://unpkg.com/simple-color-picker/dist/simple-color-picker.umd.js"/>
import ColorPicker from 'simple-color-picker';
const colorPicker = new ColorPicker();
You can retrieve the current color in different formats by using these convenient methods:
colorPicker.getColor(); // output depends on previously inputed color format
colorPicker.getHexString(); // #FFFFFF
colorPicker.getHexNumber(); // 0xFFFFFF
colorPicker.getRGB(); // {r: 255, g: 255, b: 255}
colorPicker.getHSV(); // {h: 0, s: 0, v: 1}
Options you can pass to constructor in an object like so :
const colorPicker = new ColorPicker({
color: '#FF0000',
background: '#454545',
el: document.body,
width: 200,
height: 200,
window: document.getElementsByTagName('iframe')[0].contentWindow
});
None of these options are mandatory.
color
The default color that the colorpicker will display. Default is #FFFFFF. It can be a hexadecimal number or an hex String.
background
The background color of the colorpicker. Default is transparent. It can be a hexadecimal number or an hex String.
el
A dom node or CSS selector(querySelector) to add the colorpicker to. You can also use colorPicker.appendTo(domNode | '#id')
afterwards if you prefer.
width
Desired width of the color picker. Default is 175.
height
Desired height of the color picker. Default is 150.
window
Reference to a window object. This will allow Simple Color Picker to apply event listeners in the correct context in the event that you are using it inside of an iFrame from a script that resides outside of it.
.isChoosing
Is true when mouse is down and user is currently choosing a color.
.appendTo(domElement | CSS selector)
Add the colorPicker instance to a domElement.
.remove()
Removes colorpicker from is parent and kill all listeners. Call this method for proper destroy.
.setColor(color)
Manually set the current color of the colorpicker. This is the method used on instantiation to convert color
option to actual color for the colorpicker. Param can be a hexadecimal number or an hex String.
.setSize(width, height)
Set size of the color picker for a given width and height. Note that a padding of 5px will be added if you chose to use the background option of the constructor.
.setBackgroundColor(color)
Set the background color of the colorpicker. It also adds a 5px padding for design purpose. Param can be a hexadecimal number or an hex String.
.setNoBackground()
Removes background of the colorpicker if previously set. It's no use calling this method if you didn't set the background
option or if you didn't call setBackgroundColor
previously.
.onChange(callback)
Registers callback to the update event of the colorpicker. ColorPicker inherits from component/emitter so you could do the same thing by calling colorPicker.on('update');
.getColor()
Main color getter, will return a formatted color string depending on input or a number depending on the last setColor call.
.getHexString()
Returns color as css hex string (ex: '#FF0000').
.getHexNumber()
Returns color as number (ex: 0xFF0000).
.getRGB()
Returns color as {r: 255, g: 0, b: 0} object.
.getHSV()
Returns color as {h: 1, s: 1, v: 1} object.
.isDark()
Returns true if color is perceived as dark.
.isLight()
Returns true if color is perceived as light.
The javascript module automatically injects a <style>
tag with the css it needs at the very top of the HEAD of your HTML.
If you want to override the default styles, just add your own styles in your page.
FAQs
Simple Color picker for the web
The npm package simple-color-picker receives a total of 1,170 weekly downloads. As such, simple-color-picker popularity was classified as popular.
We found that simple-color-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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.