Skip to main content
Version: 1.0.3

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:

NameTypeRequiredDescription
fieldNamestringReact Hook Form requires name as a key for the registration process. This is a required prop for all components.
valuestringDefines the selected color in the RHFColorPicker component. Use getValues('fieldName') to set the value dynamically. Defaults to Black(#000000).
onValueChange(color: IColor) => voidCallback function to get the selected color. Update form state by calling the setValue function, and passing the color value in preffered format.
disabledbooleanA boolean value to enable or disable editing of the form field.
labelReactNodeThe text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name".
showLabelAboveFormFieldbooleanRenders the form label above the field by default. Set this prop to false to hide the label.
formLabelPropsFormLabelPropsFormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
helperTextReactNodeThe 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.
errorMessageReactNodeError message to be shown for a field in FormHelperText component.
hideErrorMessagebooleanA flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
formHelperTextPropsFormHelperTextPropsFormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.