Skip to content

An intuitive phone number input with country selector for international and national phone numbers

License

Notifications You must be signed in to change notification settings

KaiHotz/React-PhoneNr-Input

Repository files navigation

React-PhoneNr-Input

NPM license npm

Overview

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

Demo and Examples here

Installation

npm:

npm i -S react-phonenr-input

yarn:

yarn add react-phonenr-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: "+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

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

Optimized for Mobile usage

mobile

Support

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

paypal