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 install 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

<Controller
  control={control}
  name={"phone"}
  render={({ field: { onChange, value } }) => (
    <PhoneInput
      value={value}
      prefix
      onchange={(n: string) => {
        onChange(n);
      }}
    />
  )}
/>

Normal use

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

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)} 
 />

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);
  }}
/> 

Based on react-number-formatter