ern-phone-input

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.

Installation

npm:

npm i ern-phone-input

yarn:

yarn add ern-phone-input

Props:

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: "[phone]", 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

Code example:

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

Support

If you like the project and want to support me, you can buy me a coffee :)