[New Component]: `PhoneInput`

[junwen-k]

Phone Input

Allows user to enter phone input using E.164 format.

Visual References

Description

I've built this component before using react-phone-number-input, however it does not fully support controlled behavior. This is taken from my previous code:

export const PhoneInputMobile = React.forwardRef<
  React.ElementRef<typeof ReactPhoneInput>,
  Omit<
    React.ComponentPropsWithoutRef<typeof ReactPhoneInput>,
    'country' | 'value' | 'onChange'
  >
>(({ international = true, className, ...props }, ref) => {
  const { country, value, onValueChange } = usePhoneInputContext();

  // https://github.com/catamphetamine/react-phone-number-input/blob/master/source/usePhoneDigits.js#L123
  // Underlying `usePhoneDigits` does not fully support controlled behavior, we needed this debounce hack to sync the value back to our store.
  const handleChange = debounce((v: Value) => onValueChange(v), 50);

  return (
    <ReactPhoneInput
      ref={ref}
      international={international}
      className={cn('px-3 py-2', className)}
      inputComponent={InputGroupInput}
      country={country}
      value={value}
      onChange={handleChange}
      {...props}
    />
  );
});
PhoneInputMobile.displayName = 'PhoneInputMobile';

Ideally, I was looking for a headless library that can fully support controlled behavior. I found react-phone-number-input, and unfortunately they suffer the same problem.

Would require more thoughts on this as well as the API design.

Anatomy

<PhoneInput.Root>
    <PhoneInput.Country />
    <PhoneInput.Input />
</PhoneInput.Root>

Libraries / Hooks

• react-international-phone - Does not support controlled mode properly. See Lack of Controlled Behavior for usePhoneInput Hook ybrusentsov/react-international-phone#215 for more details.
• react-phone-number-input - Does not support controlled mode properly. See https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/249 for more details.

Credits

Visual reference taken from Shadcn Phone Input.