1.0.2 • Published 4 years ago
fav-color-picker-react v1.0.2
Fav Color Picker React
color picker component with favourites color list that return color object having all properties that any developer required in coding.
View Demo
How to install
npm install fav-color-picker-reactHow to import
import ColorPicker from "fav-color-picker-react";How to use
<ColorPicker/>;Props
onChange Event
<ColorPicker onChange={(e)=>{console.log(e.color,e.type)}}/>onChange event handler argument e.color value
| 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. |
onChange event handler argument e.type value
| value | description |
|---|---|
| mousedownmousemovemouseup | when mouse action on color-picker, hue and alpha slider |
| touchstarttouchmovetouchend | when touch action on color-picker, hue and alpha slider |
| rgbchange | when rgb textbox value change |
Example - 2
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']}
/>type colorPickerChangeResult = {
color: ColorObject;
type: string;
};