An intuitive phone number input with country selector for international and national phone numbers
React-PhoneNr-Input is a simple to use phonenumber input field with country selection, that by default, intuitively guesses the country for- and formats the entered phonenumber
For International phonenumbers a dropdown menu is available to select ya country from.
By passing the prop format='NATIONAL'
and a default country e.g. defaultCountry='DE'
a simple input field is shown that formats the entered phonenumber with the national format declared by the defaultCountry
prop.
All written with less than 300 lines of code
npm:
npm i -S react-phonenr-input
yarn:
yarn add react-phonenr-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 |
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 my work, you can buy me a coffee :)