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