PhoneInput 
Berlitz phone input, is a text input field which comes with a dropdown that contains every available country codes.
When to use this component
Input of any type of phone number
Installation
yarn add @berlitz/phone-input
Props
All props from @berlitz/input component, as well as props from react-phone-number-input
| Prop | Type | Required | Default | Notes |
|---|---|---|---|---|
| ariaDescribedby | String | |||
| autocomplete | String | |||
| button | Bool | add an arrow button to the right of the input | ||
| defaultValue | String | |||
| disabled | Bool | |||
| id | String | |||
| invalid | Bool | |||
| name | String | X | ||
| onBlur | Func | |||
| onChange | Func | |||
| onClick | Func | onClick handler to attach to the optional button | ||
| placeholder | String | eg. "Enter phone number" | ||
| required | Bool | |||
| type | String | X | ||
| value | String | |||
| country | String | eg. "AU" | ||
| displayInitialValueAsLocalNumber | Bool | true | ||
| labels | Object | Custom translation (including country names). | ||
| metadata | Object | Custom libphonenumber-js "metadata". | ||
| internationalIcon | Node | Custom "International" icon | ||
| numberInputComponent | Node | Custom phone number component | ||
| countrySelectComponent | Node | Custom country component |
Refer to react-phone-number-input for more info
Usage
import React from 'react'
import PhoneInput from '@berlitz/phone-input'
const MyApp = () => (
<PhoneInput
placeholder="Enter phone number"
country="AU"
displayInitialValueAsLocalNumber
/>
)