RHFPhoneInput

RHFPhoneInput is available from version 2.0 and above.

The RHFPhoneInput component is based on react-international-phone, a React library that simplifies handling international phone inputs. It integrates seamlessly with Material-UI, utilizing the Textfield component with the usePhoneInput API from react-international-phone to enables users in selecting their country and input phone numbers in the specific format.

npm i react-international-phone

yarn add react-international-phone

Usage

import RHFPhoneInput, { RHFPhoneInputProps } from '@nish1896/rhf-mui-components/misc/phone-input';

<RHFPhoneInput
  fieldName="contactNumber"
  control={control}
  value={getValues("contactNumber")}
  phoneInputProps={{
    defaultCountry: "in",
    preferredCountries: ["in", "us", "au"]
  }}
  errorMessage={errors?.contactNumber?.message}
/>

The returned phone value after input is of the type -

• "+91 99887-76655"
• "+1 (765) 232-3423"

note

For field validation, make sure to set the minimum length to atleast 6.

Examples

• RHFPhoneInput
• PhoneInput

API

RHFPhoneInput extends the props of TextField 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.
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.
value	string OR undefined	✅	Pass getValues(fieldName) to synchronize the value argument in the usePhoneInput hook with the form field's actual value.
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	({ phone: string, inputValue: string, country: ParsedCountry }) => void		Callback function to get details of input phone number, including the country details.
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		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		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.
phoneInputProps	UsePhoneInputConfig & { hideDropdown?: boolean}		Props to pass in the usePhoneInput hook for customization.