react-universal-phone

🚀 react-universal-phone

A lightweight, customizable, multi-language phone input component for React.

📦 Installation

Install react-universal-phone with npm.

  npm install react-universal-phone
  or
  yarn add react-universal-phone

✨ Features

• 🌍 Supports almost all countries.
• 🈺 Built-in multi-language support (EN, HI, BN, GU, KN, ML, MR, PA, TA, TE, JA, DE, TH, RU…).
• 🎌 Auto-formatted phone numbers.
• 🚀 Lightweight & fast
• 🎨 Fully customizable styles
• 🔍 Search country feature
• 🇮🇳 Flags + dial codes included
• 🧩 Plug-and-play React component

📦 Usage/Examples

import { PhoneInput } from "react-universal-phone";

function App() {
  return <PhoneInput />;
}

export default App;

🌐 Internationalization / Multilingual support

/** Using Hindi as display language */
<PhoneInput locale="hi" />

/** Default supported languages :-
 * en, hi, bn, gu, kn, ml, mr, pa, ta, te, ja, de, th, ru
 */

⚙️ Props & configurations

Parameter	Type	Description
optionsFormat 🔗	string	Manage the format of dropdown country options.
addCountries 🔗	Country[]	Add missing countries by providing an array of country objects.
removeCountries 🔗	string[]	Remove countries from the options by providing an array of country codes.
defaultOpenOptions 🔗	boolean	Keep the options dropdown open by default.
dialCodeSelectionFormat 🔗	string	Change the format of selected option at the top.
closeOnOutsideClick 🔗	boolean	Close the options dropdown when clicking outside.
onChange 🔗	Function	A function that listens for changes.
outputSchema 🔗	object	Define which country details should be included in the output.
defaultCountry 🔗	string or boolean	To select a default country.
dialCodePlaceholder 🔗	string or boolean	Set or disable the dial code placeholder.
numberPlaceholder 🔗	string or boolean	Set or disable the main number placeholder.
dropdownArrow 🔗	string or boolean	Change or disable the down arrow icon.
divider 🔗	boolean	Enable/Disable the divider between the dial code & main input
focusOnMainInputAfterClose 🔗	boolean	Focus on the main number input just after close the options dropdown.
parentClass 🔗	string	Add parent classes on the root element. Multiple also allowed, space separated.
labelClass 🔗	string	Add classes on the label element. Multiple also allowed, space separated.
mainInputClass 🔗	string	Add classes on the main input element. Multiple also allowed, space separated.
optionsContainerClass 🔗	string	Add classes on the root element of options dropdown. Multiple also allowed, space separated.
dialCodeContainerClass 🔗	string	Add classes on the dial code container element. Multiple also allowed, space separated.
onMainInputFocus 🔗	Function	A function to listen for focus events.
onMainInputBlur 🔗	Function	A function to listen for blur events.
onOpenMenu 🔗	Function	A function triggered when open the options dropdown.
onCloseMenu 🔗	Function	A function triggered when close the options dropdown.
label 🔗	boolean	Show/Hide label.
labelText 🔗	string	Set custom text for the label.
labelType 🔗	string	default, fixed_floating To change the label view.
masking 🔗	boolean	Enable/Disable masking for the main number input.
maskingFormat 🔗	string	To change adjust the masking format.
validateMasking 🔗	boolean	This will allow typing only till the masking format.
locale 🔗	string	Change the language for the input completely.
fallbackLanguage 🔗	string	A fallback language if any translation is not available in any particular language.
addOrReplaceLocale 🔗	LocaleTypes	To add some new or replace existing language translations.
config	object	To add a global configuration. Most of the props are allowed here in the config object.
value 🔗	string or object	Value to set the input.
id 🔗	string	Input ID.
name 🔗	string	Input name.

🌐 Usage/Example of all the properties

optionsFormat

/** Default value is FLAG-CODE-NAME-DIALCODE */
/** Customize the view of options dropdown using this prop.
 * "FLAG-CODE-NAME-DIALCODE" these are all the possible values for this. We can change the order of any item.
 */

/** Example 1 :- */
<PhoneInput config={{
    optionsFormat:"FLAG-NAME"
}} />

/** Example 2 :- */
<PhoneInput optionsFormat="FLAG-NAME-DIALCODE" />

addCountries

/** Add a new country if not available by default. */

/** Example 1 :- */
<PhoneInput config={{
    addCountries:[
        {
            name: "New country name",
            code: "EXNC",
            dialCode: "+687",
            flag: "🧩"
        }
    ]
}} />

/** Example 2 :- */
<PhoneInput addCountries={[
    {
        name: "New country name",
        code: "EXNC",
        dialCode: "+687",
        flag: "🧩"
    }
]} />

removeCountries

/** Remove specific countries if you don’t want. Just need to provide countryCodes */

/** Example 1 :- */
<PhoneInput config={{
    removeCountries:["AD", "AE", "PK"]
}} />

/** Example 2 :- */
<PhoneInput removeCountries={["AD", "AE", "PK"]} />

defaultOpenOptions

/** Keep the options dropdown open by default. */

/** Example 1 :- */
<PhoneInput config={{
    defaultOpenOptions:true
}} />

/** Example 2 :- */
<PhoneInput defaultOpenOptions={true} />

dialCodeSelectionFormat

/** Default value is FLAG-DIALCODE */
/** We can pick any one or all from FLAG-CODE-NAME-DIALCODE */

/** Example 1 :- */
<PhoneInput config={{
    dialCodeSelectionFormat:"FLAG"
}} />

/** Example 2 :- */
<PhoneInput dialCodeSelectionFormat={"FLAG-NAME"} />

closeOnOutsideClick

/** Default value is true */

/** Example 1 :- */
<PhoneInput config={{
    closeOnOutsideClick:false
}} />

/** Example 2 :- */
<PhoneInput closeOnOutsideClick={false} />

onChange

/** Adding a listener function to get the value. */

/** Example 1 :- */
<PhoneInput config={{
    onChange:(e)=>{
        console.log(e);
    }
}} />

/** Example 2 :- */
<PhoneInput onChange={(e)=>{
    console.log(e);
}} />

outputSchema

/** Default will find all the keys in output. */

/** Example 1 :- */
<PhoneInput config={{
    outputSchema:{
        name:false,
        number:true,
        code:false,
        dialCode:true,
        flag:false,
        phoneNumber:true,
        formattedPhoneNumber:true
    }
}} />

/** Example 2 :- */
<PhoneInput outputSchema={{
    name:false,
    number:true,
    code:false,
    dialCode:true,
    flag:false,
    phoneNumber:true,
    formattedPhoneNumber:true
}} />

defaultCountry

/** Default value is IN. */
/** Setting the default country. */

/** Example 1 :- */
<PhoneInput config={{
    defaultCountry:"AU"
}} />

/** Example 2 :- */
<PhoneInput defaultCountry="AU" />

dialCodePlaceholder

/** Default value is +——. */
/** Setting the default country. */

/** Example 1 :- */
<PhoneInput config={{
    dialCodePlaceholder:"Country?"
}} />

/** Example 2 :- */
<PhoneInput dialCodePlaceholder="Select country" />

numberPlaceholder

/** Setting the main input placeholder. */

/** Example 1 :- */
<PhoneInput config={{
    numberPlaceholder:"Enter phone number"
}} />

/** Example 2 :- */
<PhoneInput numberPlaceholder="Enter phone number" />

dropdownArrow

/** Disable or changing the dropdown arrow icon */

/** Example 1 :- */
<PhoneInput config={{
    dropdownArrow:false
}} />

/** Example 2 :- */
<PhoneInput dropdownArrow={`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
</svg>`} />

divider

/** Default value is true */
/** Enable/Disable the divider line */

/** Example 1 :- */
<PhoneInput config={{
    divider:false
}} />

/** Example 2 :- */
<PhoneInput divider={false} />

focusOnMainInputAfterClose

/** Default value is false */

/** Example 1 :- */
<PhoneInput config={{
    focusOnMainInputAfterClose:true
}} />

/** Example 2 :- */
<PhoneInput focusOnMainInputAfterClose={true} />

parentClass

/** Adding parent class to the root element */

/** Example 1 :- */
<PhoneInput config={{
    parentClass:"my-class-1 my-class-2"
}} />

/** Example 2 :- */
<PhoneInput parentClass={"my-class-1 my-class-2"} />

labelClass

/** Adding class to the label element */

/** Example 1 :- */
<PhoneInput config={{
    labelClass:"my-class-1 my-class-2"
}} />

/** Example 2 :- */
<PhoneInput labelClass={"my-class-1 my-class-2"} />

mainInputClass

/** Adding class to the main input  element */

/** Example 1 :- */
<PhoneInput config={{
    mainInputClass:"my-class-1 my-class-2"
}} />

/** Example 2 :- */
<PhoneInput mainInputClass={"my-class-1 my-class-2"} />

optionsContainerClass

/** Adding class to the options container element */

/** Example 1 :- */
<PhoneInput config={{
    optionsContainerClass:"my-class-1 my-class-2"
}} />

/** Example 2 :- */
<PhoneInput optionsContainerClass={"my-class-1 my-class-2"} />

dialCodeContainerClass

/** Adding class to the dial code container element */

/** Example 1 :- */
<PhoneInput config={{
    dialCodeContainerClass:"my-class-1 my-class-2"
}} />

/** Example 2 :- */
<PhoneInput dialCodeContainerClass={"my-class-1 my-class-2"} />

onMainInputFocus

/** A listener function on main input focus */

/** Example 1 :- */
<PhoneInput config={{
    onMainInputFocus:(e:HTMLInputElement, data:any)=>{
        console.log(e, data);
    }
}} />

/** Example 2 :- */
<PhoneInput onMainInputFocus={(e:HTMLInputElement, data:any)=>{
    console.log(e, data);
}} />

onMainInputBlur

/** A listener function on main input blur */

/** Example 1 :- */
<PhoneInput config={{
    onMainInputBlur:(e:HTMLInputElement, data:any)=>{
        console.log(e, data);
    }
}} />

/** Example 2 :- */
<PhoneInput onMainInputBlur={(e:HTMLInputElement, data:any)=>{
    console.log(e, data);
}} />

onOpenMenu

/** A listener function on open options dropdown */

/** Example 1 :- */
<PhoneInput config={{
    onOpenMenu:(data:any)=>{
        console.log(data);
    }
}} />

/** Example 2 :- */
<PhoneInput onOpenMenu={(data:any)=>{
    console.log(data);
}} />

onCloseMenu

/** A listener function on close options dropdown */

/** Example 1 :- */
<PhoneInput config={{
    onCloseMenu:(data:any)=>{
        console.log(data);
    }
}} />

/** Example 2 :- */
<PhoneInput onCloseMenu={(data:any)=>{
    console.log(data);
}} />

label

/** Default value is true. */
/** Enable/Disable the label. */

/** Example 1 :- */
<PhoneInput config={{
    label:false
}} />

/** Example 2 :- */
<PhoneInput label={false} />

labelText

/** Changing the label. */

/** Example 1 :- */
<PhoneInput config={{
    labelText:"My new label"
}} />

/** Example 2 :- */
<PhoneInput labelText={"My new label"} />

labelType

/** We have 2 options here to change the label's view `default`, `fixed_floating`. */

/** Example 1 :- */
<PhoneInput config={{
    labelType:"fixed_floating"
}} />

/** Example 2 :- */
<PhoneInput labelType={"fixed_floating"} />

masking

/** Default value is false */
/** Enable/Disable masking */

/** Example 1 :- */
<PhoneInput config={{
    masking:true
}} />

/** Example 2 :- */
<PhoneInput masking={true} />

maskingFormat

/** Default value is (##) ####-#### */
/** Note :- “#” represents a phone number digit. */

/** Example 1 :- */
<PhoneInput config={{
    maskingFormat:"(##) [####]-####"
}} />

/** Example 2 :- */
<PhoneInput maskingFormat={"(##) #### ####"} />

validateMasking

/** Default value is false */
/** This restricts typing based on the masking format. */

/** Example 1 :- */
<PhoneInput config={{
    validateMasking:true
    maskingFormat:"(##) [####]-####"
}} />

/** Example 2 :- */
<PhoneInput validateMasking={true} maskingFormat={"(##) #### ####"} />

locale

/** Default value is hi for Hindi */

/** Example 1 :- */
<PhoneInput config={{
    locale:"en"
}} />

/** Example 2 :- */
<PhoneInput locale={"de"} />

fallbackLanguage

/** Default value is en for English */
/** The library will use this language in case of missing translations */

/** Example 1 :- */
<PhoneInput config={{
    fallbackLanguage:"en"
}} />

/** Example 2 :- */
<PhoneInput fallbackLanguage={"de"} />

addOrReplaceLocale

/** Add a new language translation or overwrite existing translations for any language */

/** Example 1 :- */
<PhoneInput config={{
    addOrReplaceLocale:[
        {
            languageCode:"hi",
            data:{
            label:"फ़ोन नंबर",
            search:"देश खोजें",
            countries:{
                IN:"भारत",
                US:"अमेरिका"
                // ... More translations for other country names
            }
        }
        }
    ]
}} />

/** Example 2 :- */
<PhoneInput addOrReplaceLocale={[
    {
        languageCode:"hi",
        data:{
        label:"फ़ोन नंबर",
        search:"देश खोजें",
        countries:{
            IN:"भारत",
            US:"अमेरिका"
            // ... More translations for other country names
        }
    }
    }
]} />

value

/** Manages the value of the input. Accepts two types of values. */

/** Example 1 :- */
<PhoneInput config={{
    value:"+91 987#######"
}} />

/** Example 2 :- */
<PhoneInput value={{
    number:"987#######",
    dialCode:"+91"
}} />

id

/** An id attribute for the main input. It will also be automatically linked to the input label. */

/** Example :- */
<PhoneInput id="myInputID" />

name

/** The name attribute for the main input.*/

/** Example :- */
<PhoneInput name="myFieldName" />

👨‍💻 Author

Ramveer Jat
Maintained with ❤️ by the creator.

• GitHub: https://github.com/ramveerj43
• LinkedIn: https://www.linkedin.com/in/ramveer-choudhary-4502a4174