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:

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

Support

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