color picker component with favourites color list that return color object having all properties that any developer required in coding.
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;
};