ern-phone-input
stands out as a user-friendly input field for phone numbers, seamlessly predicting the country and formatting the entered phone number accordingly by default.For international phone numbers, users can effortlessly choose their country from a dropdown menu.
By incorporating the prop `format='NATIONAL'` and specifying a `defaultCountry='DE'`, the input field showcases its simplicity by automatically formatting the entered phone number in the national format supported by the default country.
npm:
npm i ern-phone-input
yarn:
yarn add ern-phone-input
Name | Type | Default | Description |
---|---|---|---|
onChange | (data: PhoneNumber) => void | required | The function/method that returns the entered phonenumber or phonenumber object |
withCountryMeta | boolean | false |
changes the retuned value into an Object that contains the phonenumber and the country information.
eg.:
{ phoneNumber: "+49 176 12345678", country: { name: "Germany (Deutschland)" iso2: "DE" } } |
className | string | undefined | Adds a custom class to the Phonenumber Input Field |
defaultCountry | IsoCode | undefined | Sets the default country (use iso alpha-2 country code e.g 'US', 'GB', 'DE') |
disabled | boolean | false | Disables the Phonenumber Input Field |
format | NumberFormat | 'INTERNATIONAL' | One of: 'INTERNATIONAL', 'NATIONAL'. Sets the format of the entered phonenumber, in case of 'NATIONAL' the defaultCountry must be set |
initialValue | string | undefined | Sets the initial Value of the Phonenumber Input. This is usefull in case you need to set a phonenumber stored for example in a database |
placeholder | string | undefined | Sets the Placeholder text |
preferredCountries | IsoCode[] | undefined | Lets you restrict the country dropdown to a specific list of countries (use iso alpha-2 country code e.g 'US', 'GB', 'DE') |
regions | "asia" | "europe" | "africa" | "north-africa" | "oceania" | "america" | "carribean" | "south-america" | "ex-ussr" | "european-union" | "middle-east" | "central-america" | "north-america" | Region[] | undefined | Lets you restrict the country dropdown to a list of countries in the specified regions |
In addition to the here listed Props you can pass all other properties that can be used on a normal Html input field
import React, { useState } from 'react'
import { PhoneInput, PhoneNumber } from 'react-phonenr-input';
const Example = () => {
const [value, setValue] = useState<PhoneNumber>('')
const handleChange = (phoneNumber: PhoneNumber) => {
// Do something with the phoneNumber
setValue(phoneNumber)
}
return (
<div>
<PhoneInput onChange={handleChange}/>
</div>
)
}
If you like the project and want to support me, you can buy me a coffee :)