react-international-phone

react-international-phone

🤙 International phone component for react

Live demo: Storybook

Installation

$ npm install --save react-international-phone
$ yarn add react-international-phone

Usage

import { useState } from 'react';
import { PhoneInput } from 'react-international-phone';

const App = () => {
  const [phone, setPhone] = useState('');

  return (
    <div>
      <PhoneInput initialCountry="ua" phone={phone} onChange={setPhone} />
    </div>
  );
};

Features

• 😎 Easy to integrate - HTML input under the hood
• 🔍 Country guessing - Just start typing and component will guess the country
• 🏳️ Country flag render - Render flags using Twemoji
• ⌨ Cursor position handling - Typing in the middle of input value feels naturally
• ✨ Lightweight - no third-party dependencies

PhoneInput component

Properties

Prop	Required	Type	Description	Default value
initialCountry	+	CountryIso2	Initial country value (iso2).
initialPhone	-	string	Initial phone value.	""
hideDropdown	-	boolean	Hide the dropdown icon. Make country selection not accessible.	false
placeholder	-	string	Input's placeholder	undefined
disabled	-	boolean	Disable phone input and country selector.	false
prefix	-	string	Prefix for phone value.	"+"
defaultMask	-	string	This mask will apply on countries that does not have specified mask.	"............" // 12 chars
hideSpaceAfterDialCode	-	boolean	Hide space after country dial code	false
historySaveDebounceMS	-	number	Save value to history if there were not any changes in provided milliseconds timeslot. Undo/redo (ctrl+z/ctrl+shif+z) works only with values that are saved in history	200
disableCountryGuess	-	boolean	Disable country guess on value change. - onCountryGuess callback would not be called.	false
disableDialCodePrefill	-	boolean	Disable dial code prefill on initialization. Dial code prefill works only when "empty" phone value have been provided.	false
forceDialCode	-	boolean	Always display the dial code. Dial code can't be removed/changed by keyboard events, but it can be changed by pasting another country phone value.	false
disableDialCodeAndPrefix	-	boolean	Phone value will not include passed dialCode and prefix if set to true. - disableCountryGuess value will be ignored and set to true. - forceDialCode value will be ignored and set to false.	false
showDisabledDialCodeAndPrefix	-	boolean	Show prefix and dial code between country selector and phone input. - Works only when disableDialCodeAndPrefix is true	false
inputProps	-	InputHTMLAttributes	Default input component props	undefined

Events

Event	Required	Type	Description
onChange	-	(phone: string) => void	Callback that calls on phone change

Input events like onFocus and onBlur can be passed to the inputProps

Style properties

Prop	Required	Type	Description	Default value
style	-	CSSProperties	Custom styles for PhoneInput container	undefined
className	-	string	Custom className for PhoneInput container	undefined
inputStyle	-	CSSProperties	Custom styles for input field	undefined
inputClassName	-	string	Custom className for input field	undefined
countrySelectorStyleProps	-	CountrySelectorStyleProps	Style properties for country selector	undefined
dialCodePreviewStyleProps	-	DialCodePreviewStyleProps	Style properties for dial code preview	undefined

CSS variables

Variable	Default value
--react-international-phone-height	36px
--react-international-phone-background-color	white
--react-international-phone-text-color	#222
--react-international-phone-font-size	13px
--react-international-phone-border-radius	4px
--react-international-phone-border-color	gainsboro
--react-international-phone-disabled-background-color	whitesmoke
--react-international-phone-disabled-text-color	#666

CountrySelector component

Properties

Prop	Required	Type	Description	Default value
selectedCountry	-	CountryIso2	Selected country (iso2)	undefined
disabled	-	boolean	Is CountrySelector disabled	undefined
hideDropdown	-	boolean	Hide dropdown icon and make CountrySelector not clickable	undefined

Events

Prop	Required	Type	Description	Default value
onSelect	-	(country: ParsedCountry) => void	Callback that calls on country select	undefined

Style properties (CountrySelectorStyleProps type)

Prop	Required	Type	Description	Default value
style	-	CSSProperties	Custom styles for CountrySelector container	undefined
className	-	string	Custom className for CountrySelector container	undefined
buttonStyle	-	CSSProperties	Custom styles for CountrySelector button	undefined
buttonClassName	-	string	Custom className for CountrySelector button	undefined
flagStyle	-	dropdownStyleProps	Custom styles for CountrySelector flag	undefined
flagClassName	-	string	Custom className for CountrySelector flag	undefined
dropdownArrowStyle	-	dropdownStyleProps	Custom styles for CountrySelector dropdown arrow	undefined
dropdownArrowClassName	-	string	Custom className for CountrySelector dropdown arrow	undefined
dropdownStyleProps	-	CountrySelectorDropdownStyleProps	Style properties for CountrySelector dropdown	undefined

CSS variables

Variable	Default value
--react-international-phone-country-selector-background-color	--react-international-phone-background-color
--react-international-phone-country-selector-background-color-hover	whitesmoke
--react-international-phone-disabled-country-selector-background-color	--react-international-phone-disabled-background-color
--react-international-phone-country-selector-border-color	13px
--react-international-phone-country-selector-arrow-size	4px
--react-international-phone-country-selector-arrow-color	#777
--react-international-phone-disabled-country-selector-arrow-color	#999

CountrySelectorDropdown component

Properties

Prop	Required	Type	Description	Default value
show	+	boolean	Show dropdown
dialCodePrefix	-	string	Prefix for country code	"+"
selectedCountry	-	CountryIso2	Selected option country code (iso2)	undefined

Events

Prop	Required	Type	Description	Default value
onSelect	-	(country: ParsedCountry) => void	Callback that calls on option select	undefined
onClickOutside	-	() => void	Callback that calls on outside click	undefined
onEscapePress	-	() => void	Callback that calls on escape keyboard key press	undefined

Style properties (CountrySelectorDropdownStyleProps type)

Prop	Required	Type	Description	Default value
style	-	CSSProperties	Custom styles for CountrySelectorDropdown container	undefined
className	-	string	Custom className for CountrySelectorDropdown container	undefined
listItemStyle	-	CSSProperties	Custom styles for CountrySelectorDropdown list-item container	undefined
listItemClassName	-	string	Custom className for CountrySelectorDropdown list-item container	undefined
listItemFlagStyle	-	CSSProperties	Custom styles for CountrySelectorDropdown list-item flag	undefined
listItemFlagClassName	-	string	Custom className for CountrySelectorDropdown list-item flag	undefined
listItemCountryNameStyle	-	CSSProperties	Custom styles for CountrySelectorDropdown list-item country name	undefined
listItemCountryNameClassName	-	string	Custom className for CountrySelectorDropdown list-item country name	undefined
listItemDialCodeStyle	-	CSSProperties	Custom styles for CountrySelectorDropdown list-item country dial code	undefined
listItemDialCodeClassName	-	string	Custom className for CountrySelectorDropdown list-item country dial code	undefined

CSS variables

Variable	Default value
--react-international-phone-dropdown-item-font-size	14px
--react-international-phone-dropdown-item-text-color	--react-international-phone-text-color
--react-international-phone-dropdown-item-background-color	--react-international-phone-background-color
--react-international-phone-dropdown-item-dial-code-color	gray
--react-international-phone-selected-dropdown-item-text-color	--react-international-phone-text-color
--react-international-phone-selected-dropdown-item-background-color	whitesmoke
--react-international-phone-selected-dropdown-item-dial-code-color	-react-international-phone-dropdown-item-dial-code-color
--react-international-phone-dropdown-shadow	2px 2px 16px rgb(0 0 0 / 25%)

DialCodePreview component

Properties

Prop	Required	Type	Description	Default value
dialCode	+	string	Country dial code (iso2)
prefix	+	string	Dial code prefix
disabled	-	boolean	Is component disabled	undefined

Style properties (DialCodePreviewStyleProps type)

Prop	Required	Type	Description	Default value
style	-	CSSProperties	Custom styles for DialCodePreview container	undefined
className	-	string	Custom className for DialCodePreview container	undefined

CSS variables

Variable	Default value
--react-international-phone-dial-code-preview-background-color	--react-international-phone-background-color
--react-international-phone-dial-code-preview-border-color	--react-international-phone-border-color
--react-international-phone-dial-code-preview-text-color	--react-international-phone-text-color
--react-international-phone-dial-code-preview-font-size	--react-international-phone-font-size
--react-international-phone-dial-code-preview-disabled-background-color	--react-international-phone-disabled-background-color
--react-international-phone-dial-code-preview-disabled-text-color	--react-international-phone-disabled-text-color

Changelog

v1.1.0 (2022-10-30)

• Add CSS variables #3
• imp(styles): add css variables a27b9a7
• imp(docs): add css-variables to readme 0470536
• fix: update stylelint-config-standard-scss dependency 748c4bc