npm install --save react-intl-tel-inputor...
yarn add react-intl-tel-input| key | default | description |
|---|---|---|
| css | ['intl-tel-input', ''] | CSS classnames. First one is for the component wrapper, and second one is for text input. |
| style | {} | Style object for the wrapper div. Useful for setting 100% width on the wrapper, etc. |
| defaultValue | '' | The value used to initialize input. This will only work on uncontrolled component. |
| value | '' | The value of the input field. Useful for making input value controlled from outside the component. |
| fieldName | '' | It's used as `input` field `name` attribute. |
| fieldId | '' | It's used as `input` field `id` attribute. |
| countriesData | array | Countries data can be configured, it defaults to data defined in `AllCountries`. |
| disabled | null | Disable this component. |
| allowDropdown | true | Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state. |
| autoComplete | off | Set the value of the autoComplete attribute on the input. For example, set it to phone to tell the browser where to auto complete phone numbers. |
| autoPlaceholder | true | Add or remove input placeholder with an example number for the selected country. |
| autoHideDialCode | true | If there is just a dial code in the input: remove it on blur, and re-add it on focus. |
| placeholder | null | Static placeholder for input controller. When defined it takes priority over autoPlaceholder. |
| customPlaceholder | null | Change the placeholder generated by autoPlaceholder. Must return a string. |
| defaultCountry | '' | Default country. |
| excludeCountries | undefined | Don't display the countries you specify. (Array) |
| formatOnInit | true | Format the input value during initialisation. |
| noCountryDataHandler | null | The function which can catch the "no this default country" exception. |
| geoIpLookup | null | GeoIp lookup function. |
| nationalMode | true | Don't insert international dial codes. |
| numberType | 'MOBILE' | Number type to use for placeholders. |
| onlyCountries | [] | Display only these countries. |
| preferredCountries | ['us', 'gb'] | The countries at the top of the list. defaults to United States and United Kingdom. |
| separateDialCode | false | Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable nationalMode because technically we are dealing with international numbers, but with the dial code separated. |
| utilsScript | '' | Specify the path to the libphonenumber script to enable validation/formatting. |
| onSelectFlag | null | Allow main app to do things when a country is selected. |
| onPhoneNumberChange | null | Optional validation callback function. It returns validation status, input box value and selected country data. |
| onPhoneNumberBlur | null | Optional validation callback function. It returns validation status, input box value and selected country data. |
| useMobileFullscreenDropdown | true | Render fullscreen flag dropdown when mobile useragent is detected. The dropdown element is rendered as a direct child of document.body |
| telInputProps | {} | Pass through arbitrary props to the tel input element. |
| format | false | Format the number. |
@jackocnr and his awesome project International Telephone Input.
MIT License