@berlitz/phone-input

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