1.0.2 • Published 2 years ago
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
codesandbox-example
ghpages-example
gitHub-SourceCode
How to install
npm install fav-color-picker-react
How to import
import ColorPicker from "fav-color-picker-react";
How to use
<ColorPicker/>;
Props
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 |
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;
};
View Demo
codesandbox-example
ghpages-example
gitHub-SourceCode
License Free to use
Author
developergovindgupta (Govind Prasad Gupta)
Email : govindprasadguptamca@gmail.com