antd-phone-input

Antd Phone Input

Advanced phone input component for Ant Design that provides support for all countries and is compatible with antd 4 and 5 versions. It has built-in support for area codes and provides strict validation to ensure the entered numbers are valid. This open-source project is designed to simplify the process of collecting phone numbers from users.

Installation

npm i antd-phone-input

yarn add antd-phone-input

Usage

The library is designed to work with the 4.x and 5.x series of versions in the same way. It can be used as a regular Ant Input (see the sample below). More usage examples can be found in the examples directory.

import React from "react";
import FormItem from "antd/es/form/FormItem";
import PhoneInput from "antd-phone-input";

const Demo = () => {
  return (
    <FormItem name="phone">
      <PhoneInput enableSearch/>
    </FormItem>
  )
}

Value

The value of the component is an object containing the parts of the phone number. This format of value gives a wide range of opportunities for handling the data in your desired way.

{
  countryCode: 1,
  areaCode: "702",
  phoneNumber: "1234567",
  isoCode: "us",
  valid: function valid(strict)
}

Validation

The valid function of the value object returns the current validity of the entered phone number based on the selected country. So this can be used in a validator like this:

const validator = (_, {valid}) => {
  // if (valid(true)) return Promise.resolve(); // strict validation
  if (valid()) return Promise.resolve(); // non-strict validation
  return Promise.reject("Invalid phone number");
}

return (
  <FormItem rules={[{validator}]}>
    <PhoneInput/>
  </FormItem>
)

By default, the valid function validates the phone number based on the possible supported lengths of the selected country. But it also supports a strict validation that apart from the length also checks if the area code is valid for the selected country. To enable strict validation, pass true as the first argument of the valid function.

Props

Apart from the below-described phone-specific properties, all Input properties that are supported by the used antd version, can be applied to the phone input component.

Property	Description	Type
value	An object containing a parsed phone number or the raw number. This also applies to the initialValue property of Form.Item.	object / string
country	Country code to be selected by default. By default, it will show the flag of the user's country.	string
enableSearch	Enables search in the country selection dropdown menu. Default value is false.	boolean
searchNotFound	The value is shown if enableSearch is true and the query does not match any country. Default value is No country found.	string
searchPlaceholder	The value is shown if enableSearch is true. Default value is Search country.	string
disableDropdown	Disables the manual country selection through the dropdown menu.	boolean
onlyCountries	Country codes to be included in the list. E.g. onlyCountries={['us', 'ca', 'uk']}.	string[]
excludeCountries	Country codes to be excluded from the list of countries. E.g. excludeCountries={['us', 'ca', 'uk']}.	string[]
preferredCountries	Country codes to be at the top of the list. E.g. preferredCountries={['us', 'ca', 'uk']}.	string[]
onChange	The only difference from the original onChange is that value comes first.	function(value, event)
onMount	The callback is triggered once the component gets mounted.	function(value)

Contribute

Any contribution is welcome. If you have any ideas or suggestions, feel free to open an issue or a pull request. And don't forget to add tests for your changes.

License

Copyright (C) 2023 Artyom Vancyan. MIT