RHFColorPicker
RHFColorPicker is derived from the ColorPicker component of react-color-palette package.
npm install react-color-palette
yarn add react-color-palette
Usage
import RHFColorPicker, { RHFColorPickerProps } from '@nish1896/rhf-mui-components/misc/color-picker';
The color-picker accepts string value in hex
, rgb
, hsl
or text format, such as:
#00ffff
rgb(0 255 255)
hsl(180 100% 100% / 1)
cyan
If an invalid value is provided, the default color #000000
(black) will be selected.
<RHFColorPicker
fieldName='favouriteColor'
value={getValues('favouriteColor')}
onValueChange={color => setValue('favouriteColor', color.hex)}
/>
note
The onValueChange
prop is mandatory and allows you to choose the format
of the selected color value based on your preference. The returned value
need to be passed to the setValue
function to update the form state.
The returned value from onValueChange
is an object with the equivalent
hex, rgb and hsv values.
{
hex: '#00ffff',
hsv: {
a: 1,
h: 180,
s: 100,
v: 100
},
rgb: {
a: 1,
b: 255,
g: 255,
r: 0
}
}
Examples
Alternatives
If this package doesn't meet your requirements, consider the react-color package.
API
RHFColorPickerProps
extends the props of ColorPicker
and accepts the following additional props:
Name | Type | Required | Description |
---|---|---|---|
fieldName | string | ✅ | React Hook Form requires name as a key for the registration process. This is a required prop for all components. |
value | string | Defines the selected color in the RHFColorPicker component. Use getValues('fieldName') to set the value dynamically. Defaults to Black(#000000 ). | |
onValueChange | (color: IColor) => void | ✅ | Callback function to get the selected color. Update form state by calling the setValue function, and passing the color value in preffered format. |
disabled | boolean | A boolean value to enable or disable editing of the form field. | |
label | ReactNode | The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name". | |
showLabelAboveFormField | boolean | Renders the form label above the field by default. Set this prop to false to hide the label. | |
formLabelProps | FormLabelProps | FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component. | |
helperText | ReactNode | The content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message. | |
errorMessage | ReactNode | Error message to be shown for a field in FormHelperText component. | |
hideErrorMessage | boolean | A flag to prevent replacement of helper text of a field by the error message when the validation is triggered. | |
formHelperTextProps | FormHelperTextProps | FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component. |