react-universal-phone
v1.0.0
Published
A lightweight, customizable, multi-language phone input component for React.
Maintainers
ramveerj43Keywords
Readme
🚀 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