
Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
fav-color-picker-react
Advanced tools
color picker component with favourites color list that return color object having all properties that any developer required in coding. As rgb, rgba, hsl, hsla, hex, r, g, b, a, h, s, l, etc. color code.
npm install fav-color-picker-react
import ColorPicker from "fav-color-picker-react";
<ColorPicker/>;
property | type | default value | Description |
---|---|---|---|
color | string | "Red" | any valid string color value. |
width | number | 300 | width of color palette |
height | number | 200 | height of color palette |
favourites | array of strings | [ ] | List of favourite colors that user can select |
<ColorPicker onChange={(e)=>{console.log(e.color,e.type)}}/>
Property | Description < ColorObject > |
---|---|
.name | Name of color defined in css3 |
.rgb | String rgb color value |
.rgba | String rgba color value |
.hex | String Hexa code of color |
.hexa | String Hexa code of color with alpha value |
.hsl | String HSL color |
.hsla | String HSL color with alpha value |
.r | Numeric Red Value |
.g | Numeric Green Value |
.b | Numeric Blue Value |
.a | Numeric Alpha Value Floating Point |
.h | Numeric Hue Value |
.s | Numeric Saturation Value |
.l | Numeric Lightness Value |
.str | String that is passed for conversion of color |
.isValid | true if passed string is valid color string or valid html colorName. |
value | description |
---|---|
mousedown mousemove mouseup | when mouse action on color-picker, hue and alpha slider |
touchstart touchmove touchend | when touch action on color-picker, hue and alpha slider |
rgbchange | when rgb textbox value change |
import ColorPicker, { colorPickerChangeResult, ColorObject } from "fav-color-picker-react";
<ColorPicker
color='red'
width={300}
height={150}
onChange={(e: colorPickerChangeResult) => {
document.body.style.backgroundColor=e.color.rgba;
}}
favourites={['red', 'yellow', 'green', 'cyan', 'blue', 'magenta', 'pink', 'white', 'silver', 'gray', 'maroon', 'black']}
/>
NOTE : for TypeScript onChange event argument type must be specify :colorPickerChangeResult
type colorPickerChangeResult = {
color: ColorObject;
type: string;
};
FAQs
color picker component with favourites color list that return color object having all properties that any developer required in coding. As rgb, rgba, hsl, hsla, hex, r, g, b, a, h, s, l, etc. color code.
The npm package fav-color-picker-react receives a total of 5 weekly downloads. As such, fav-color-picker-react popularity was classified as not popular.
We found that fav-color-picker-react 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
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.