react-bootstrap-intl-tel-input
React international telephone input built on bootstrap v4
Versioning
bootstrap@4.0.0 = react-bootstrap-intl-tel-input ≤0.0.16
bootstrap@4.0.0-alpha.6 = react-bootstrap-intl-tel-input ≥1.0.0
Install
npm i react-bootstrap-intl-tel-input --save
Usage
<IntlTelInput preferredCountries='US' 'GB' defaultCountry='US' defaultValue='+1 555-555-5555' onChange= this/>Props
| Name | Prop Type | Default Prop | Details |
|---|---|---|---|
| defaultValue | number, string | Default phone number. Can be either an international or national number. Placing a + in front of the calling code will allow the component to parse the number and automatically select the appropriate country. |
|
| preferredCountries | string[] | [] | Expects an array of ISO 3166-1 alpha-2 codes. Supplied values will be pushed to the top of the dropdown list. |
| onChange | func() | Passes back data regarding current phone number such as validation status, selected country information, and currently entered phone number. | |
| disabled | boolean | false | Toggles the disabled attribute of the tel input and country selector. |
| removeToken | element, string | <span>×</span> |
Token on the right side of the input that clears typeahead and phonenumber values when clicked. |
| paginate | number | 50 | Specifies how many results to show at once in the dropdown list. |
| paginateText | element, string | Display additional results... | Text displayed once the user has scrolled to the bottom of the list. |
| noResultsMessage | string | No results available | Message displayed when the typeahead search term yields no results. |
| minLengthMessage | string | Too short to be a valid phone number | User friendly validation message returned by the onChange function when the phone number is too short. |
| maxLengthMessage | string | Too long to be a valid phone number | User friendly validation message returned by the onChange function when the phone number is too long. |
| callingCodeMessage | string | Please select a valid country code | User friendly validation message returned by the onChange function when a invalid country code is entered. |
| catchAllMessage | string | Not a valid phone number | User friendly validation message returned by the onChange function when all other validation messages are not applicable. |
| validMessage | string | This phone number is valid | User friendly validation message returned by the onChange function when the phone number is valid. |
| placeholder | string | Search for a calling code by country | Placeholder of the tel input. |
| maxHeight | number | 300 | Max height of the country dropdown list. |
| defaultCountry | string | US | Default country to select when no defaultValue is supplied. |
| inputClassName | string | Adds classNames to the tel input. | |
| callingCodeDivider | element, string | <span>/</span> |
Token used between calling codes in the dropdown list. |
| reset | boolean | When set to true, the input will be reset to its defaultValue |
Note: All the validation messages are read to screen readers, so be sure to be descriptive!
Development
npm start