Skip to main content
function usePhoneNumberState(options: UsePhoneNumberStateOptions): UsePhoneNumberStateResult;
A hook for managing phone number state with conversion between E.164 string and PhoneNumber object formats. This hook handles the bidirectional sync between:
  • An E.164 formatted string (used for API calls)
  • A PhoneNumber object with value/e164 fields (used by PhoneNumberInput/PhoneNumberForm)

​
Parameters

ParameterTypeDescription
optionsUsePhoneNumberStateOptionsConfiguration options for the hook.

​
Returns

UsePhoneNumberStateResult Phone number state and handlers for use with PhoneNumberInput/PhoneNumberForm.

​
Example

const { phoneNumberObject, countryCode, handlePhoneNumberChange, handleCountryCodeChange } =
  usePhoneNumberState({
    phoneNumber: state.phoneNumber,
    onPhoneNumberChange: (e164) => dispatch({ type: "SET_PHONE_NUMBER", payload: { phoneNumber: e164 } }),
  });

<PhoneNumberForm
  phoneNumber={phoneNumberObject}
  countryCode={countryCode}
  onPhoneNumberChange={handlePhoneNumberChange}
  onCountryCodeChange={handleCountryCodeChange}
/>