RHFColorPicker

RHFColorPicker is derived from the ColorPicker component from the react-color-palette package.

npmyarnpnpm

npm install react-color-palette

yarn add react-color-palette

pnpm add react-color-palette

Usage

import RHFColorPicker, { RHFColorPickerProps } from '@nish1896/rhf-mui-components/misc/color-picker';

The color picker accepts string values 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) is 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}
/>

The color value returned from the onValueChange prop is an object containing 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. Props marked with * are required.

Name	Type	Description
`fieldName`*	`string`	Name of the field registered with React Hook Form. This prop is required for all components.
`control`*	UseFormControl	The control option yielded on calling the useForm hook.
`registerOptions`	`RegisterOptions`	React Hook Form validation rules. Useful when not using a schema validation library such as Yup or Joi.
`valueKey`	`hex / rgb / hsv`	Determines the format of the selected color value. Returns a `hex`, `rgba`, or `hsva` representation of the selected color. When `excludeAlpha` is enabled, alpha information is omitted from the returned value. Default value: `hex`.
`defaultColor`	`string`	The default color to select when the field is not initialized. Provide a valid color string, hex, rgb or hsv value. Default value: Black(`#000000`)
`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.
`customOnChange`	`({ color, setColor }) => void`	An optional callback function to override the default `onChange` behavior of the color picker component. This invalidates the usage of `onValueChange` function. You can get the selected color value and the `setColor` function from the parameters to implement your custom logic and update the form state.
`disabled`	`boolean`	Disables the component and prevents user interaction.
`label`	`ReactNode`	The text to render in the FormLabel component. By default, the value of `fieldName` is transformed (e.g., "firstName" to "First Name") using the fieldNameToLabel function.
`showLabelAboveFormField`	`boolean`	Renders the form label above the field.
`formLabelProps`	FormLabelProps	FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
`hideLabel`	`boolean`	Hides the FormLabel component if you don’t want to display the default form label component or prefer to render a fully custom label instead.
`renderError`	`(error: FieldError) => ReactNode`	Custom renderer for the React Hook Form field error. Receives the current field error and returns the content to display, such as `error.message` or a custom React element in the `HelperText` component. Added in `v4.1.0`.
`hideErrorMessage`	`boolean`	A flag to prevent replacement of helper text of a field by the `errorMessage` when the validation is triggered.
`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.
`formHelperTextProps`	FormHelperTextProps	FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Source Code

View the full implementation of this component on GitHub.

Date Time Picker

Rich Text Editor