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';

The color-picker accepts hex, rgb, hsl or text format, such as:

• #561ecb
• rgb(86 30 203)
• hsl(120 100% 50% / .5)
• 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.

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.
value	string		Selected color in RHFColorPicker component. Default is #000000 (black).
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		Render form label above the form field in FormLabel component.
formLabelProps	FormLabelProps		FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
helperText	ReactNode		Optional helperText to render under RHFSelect or RHFNativeSelect field.
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		Prevent replacing of form HelperText by error message during validation trigger.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.