PhoneInput

PhoneInput is a highly customizable component with auto formatting and validating the enterred phone number.

Install

To start using PhoneInput component, you can install the @react-awesome/phone-input library or you can import it directly from @react-awesome/components if you have installed it before. In your project directory, run the following command to install the dependencies:

npm i @react-awesome/phone-input

Usage

Default

By default, Phone Input comes with a country selector.

import { PhoneInput } from '@react-awesome/phone-input'
import '@react-awesome/phone-input/dist/style.css'
 
const Example = () => {
  return <PhoneInput />
}

Customizable Supported Countries

By default, Phone Input supports all countries but you can modify this behaviour to only support some specific countries by providing supportedCountries property.

In this example, by passing ["US", "CA", "VN"] to the supportedCountries, you can only choose one of them in the country selector.

import { PhoneInput } from '@react-awesome/phone-input'
import '@react-awesome/phone-input/dist/style.css'
 
const Example = () => {
  return <PhoneInput supportedCountries={['US', 'CA', 'VN']} />
}

Auto formating and validating with built-in caret handler

Phone Input automatically formats and validates every character that user type.

import { PhoneInput } from '@react-awesome/phone-input'
import '@react-awesome/phone-input/dist/style.css'
 
const Example = () => {
  return <PhoneInput />
}

Without country select

Phone Input without country select.

import { PhoneInput } from '@react-awesome/phone-input'
import '@react-awesome/phone-input/dist/style.css'
 
const Example = () => {
  return <PhoneInput showCountrySelect={false} />
}

API

PhoneInput components takes the following props:

className (optional)

Classes for the container.

• Type: string
• Default: undefined

inputClassname (optional)

Classes for the input.

• Type: string
• Default: undefined

selectClassname (optional)

Classes for the country select container.

• Type: string
• Default: undefined

selectButtonClassname (optional)

Classes for the country select button.

• Type: string
• Default: undefined

selectListClassname (optional)

Classes for the country select pane.

• Type: string
• Default: undefined

selectOptionClassname (optional)

Classes for each country select option.

• Type: string
• Default: undefined