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 the field value is uninitialized, the default color Black(#000000) will be selected, which can be configured using the defaultColor prop. Refer to the colorToString function to convert an RGB or HSV color object into a string, which can be used to set the default color for the color picker.

<RHFColorPicker
  fieldName='favouriteColor'
  control={control}
  value={getValues('favouriteColor')}
  errorMessage={errors?.favouriteColor?.message}
/>

The returned color value from onValueChange prop 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

• RHFColorPicker
• ColorPicker

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.
control	UseFormControl	✅	The control option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options for validation if using react-hook-form without any validation libraries like yup or Joi.
value	string	✅	Defines the selected color in the RHFColorPicker component. Use getValues('fieldName') to set the value dynamically, else defaultColor is selected as the current color.
valueKey	hex or rgb or hsv		Returns the hex, rgba or hsva string for the selected color. Returns hex code by default.
defaultColor	string		The default color to select when the field is not initialized. The default value Black(#000000) can be overridden by providing a valid color string, hex, rgb or hsv value.
excludeAlpha	boolean		Specifies whether to exclude alpha from the color string when the valueKey is rgb or hsv. Alpha will only be excluded if its value is 1 or is undefined in the input color.
required	boolean		Indicates that the field is mandatory by adding an asterisk symbol (*) to the formLabel. This visual cue helps users quickly identify required fields in the form.
onValueChange	(color: IColor) => void		Callback function to get the selected color in hex, rgb or hsv format. The color format being set in field value can be configured by the valueKey prop.
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" using the fieldNameToLabel function.
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.