React-phone-input-pro NPM

react-phone-input-pro

Phone number input component for react to format phone numbers according to selected country in real time.

Features

Easy to use - just import and use.
Lightweight - No third-party dependencies.
Search bar - You can anable or disable search bar from countries options list.
You have option to include or exclude dial code from number.
You can create your own formats

Installation

Run this command in your terminal

npm add react-phone-input-pro

Props	Description
initialFormat: Boolean	When using this component in editable forms. this function automatically guess the the dial code and formats the number
prefix: Boolean	user will get dial code pre defined When this is true or undefined
className: String	To add a css class in this component
includeDialingCode: Boolean	If you don't want to include dial code in number then make this false
placeholder: String	To change placeholder
onchange: Function()	This function returns current unformatted value. Which you can use to setState of value.
onlyCountries: Array	To filter country options. e.g.: "USA", "IND"
fixLength: Boolean	To limit input length
disabled: Boolean	To make input and selector disable
fullIsoCode: Boolean	Sets 3 letter ISO Code e.g. "IND", "USA"
searchOption: Boolean	To add or remove search bar
getCountryCode: Function()	To get selected country code
flags: Boolean	To get country code instead of flag
error: errorStatus:boolean, errorMessage:string	To show error message

Usage

import PhoneInput from 'react-phone-input-pro';

const [number, setNumber] = useState();
const [err, setErr] = useState(false);

//for typescript
const [number, setNumber] = useState<string | number>();
 const [err, setErr] = useState(false);

Example: Inside React-hook-form

register method

<PhoneInput 
  value={number}
  fullIsoCode={true} 
  {...register('number', { required: true }) }
/>

controller method

<Controller
control={control}
name="PhoneInput"
render={({ field: { onChange, value} }) => (
    <PhoneInput 
    value={number}
    initialFormat={true} 
    prefix={true} 
    fixLength={true}
    fullIsoCode={true} 
    searchOption={true}
    onchange={onChange}
/>

Normal use

<PhoneInput
  initialFormat={true} 
  value={number}
  prefix={true}
  onchange={(n) => setNumber(n)}
  fullIsoCode={true}
/>

Untitled

Create your own format

<PhoneInput 
   value={number}
   initialFormat={true} 
   prefix={true}
   placeholder={"Phone number..."}
   fixLength={true}
   format={"+100 #,##-(###)/##,##"}
   fullIsoCode={true}
   searchOption={true}
   onchange={(n)=> setPhone(n)} 
 />

Screen Recording 2023-05-27 at 9 14 55 PM

Error handling

<PhoneInput
  value={number}
  initialFormat={true}
  prefix={false}
  placeholder={"Phone number..."}
  error={[err, "Invalid Number"]}
  fullIsoCode={true} 
  searchOption={true}
  onchange={(value: string)=> {
    setNumber(value)
    setErr(false);
  }}
/>

Screen Recording 2023-05-06 at 8 35 22 PM