faraazHasan
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