Migration Guide

Why is it Recommended ?

Version 2 introduces significant enhancements and optimizations for nearly all components from Version 1. In addition to these improvements, the package now includes five new components:

• RHFAutocomplete
• RHFMultiAutocomplete
• RHFCountrySelect
• RHFTagsInput
• RHFPhoneInput

These additions expand the package's utility, making it a compelling upgrade for developers.

Limitations of Version 1

1. Validation Support: Some of the components in version 1 like RHFRadioGroup lacked validation through registerOptions and required third-party libraries like Joi for validation.

2. Disabling Form Fields: RHFCheckboxGroup and RHFRadioGroup components did not provide the option to disable form fields.

3. onValueChange: In Version 1, the onValueChange function included the ChangeEvent as the first argument and the updated values as the second or even third arguments. In practice, most use cases require only the changed values, making the event parameter unused, affecting the readability and maintainability of the code.

All of these issues have been addressed in version 2.

caution

Deprecation of Version 1
Given these improvements and the resolution of key limitations, Version 1 will NO LONGER receive updates. Developers are encouraged to upgrade to Version 2 to benefit from these enhancements and new features.

Code Changes

Version 2 introduces updates and enhancements to various components, aligning them with the control prop from the useForm hook for consistent and optimized functionality. While the majority of props for each component remain unchanged, the updates made to the affected props are minimal yet highly impactful. Below are the detailed changes:

Migration to control Prop

The following components now use the control prop instead of register:

• RHFTextField
• RHFPasswordInput
• RHFSelect
• RHFNativeSelect
• RHFSlider
• RHFDatePicker
• RHFTimePicker
• RHFDateTimePicker
• RHFRichTextEditor

<RHFTextField
  fieldName="firstName"
- register={register}
+ control={control}
  errorMessage={errors?.firstName?.message}
/>

Enhanced Validation

The registerOptions prop has been added to improve validation capabilities for:

• RHFCheckbox
• RHFCheckboxGroup
• RHFRadioGroup
• RHFSwitch
• RHFRating
• RHFRichTextEditor

Required Validation

Every field now includes support for the required prop. When enabled, it appends an asterisk (*) to the field label, visually signaling that the field requires a valid value. This ensures users are aware of the necessity to provide input.

Disabling fields

The disabled prop has been added to the following components, enabling better control over form fields:

• RHFCheckboxGroup
• RHFRadioGroup

OnValueChange

As previously mentioned, the changed value(s) can now be accessed earlier in the onValueChange callback function, followed by the event handler(s) for that component. This ensures that the relevant data is easily accessible without requiring developers to handle unused parameters. For detailed usage, refer to the onValueChange function in the API reference section for each component.

Component Changes

Significant changes have been made to each of the components listed below that enhance its functionality and makes it more compatible with other core components of this package.

1. RHFNativeSelect

Use FormLabel instead of InputLabelto display label text for the field.

Removed Props -

• defaultValue
• showDefaultOption

Added Props -

• showLabelAboveFormField
• formLabelProps
• helperText

2. RHFSwitch

New Props Added -

• errorMessage
• helperText
• hideErrorMessage
• formHelperTextProps

3. RHFColorPicker

Unlike the previous implementation of v1, the field value is now handled internally whenever the user selects a color.

New Props Added -

• control
• registerOptions
• defaultColor
• excludeAlpha
• valueKey

onValueChange prop is now optional, but its implementation remains unchanged.