-
Added a validation console error message when an incorrect
value
is supplied: when supplied,value
must be inE.164
format (no punctuation). -
Fixed the demo page having an old copy of
libphonenumber-js
.
- In response to a recently reported issue, changed the behavior of the "With Country Select" input in cases when the calling code corresponds to multiple possible countries (for example,
+1
calling code corresponds to bothUS
andCA
): now it will prefer showing the country flag that was selected manually by the user, or the default country flag.
- Migrated to "ES Module" exports.
- Fixed erasing
react-hook-form
component's value.
- Fixed TypeScript "typings".
- Fixed formatting incomplete phone numbers having less than 3 leading digits.
-
Added TypeScript "typings".
-
The
/core
"with country select" component now doesn't require acountrySelectComponent
property because it now has a default value.
- Added
inputComponent
property on a React Native "without country select" component.
- Fixed a small bug in a "without country select" input: when setting a
country
that doesn't correspond to the currentvalue
property it now changes thevalue
property accordingly.
- Fixed React Native
{...rest}
props passthrough.
- Fixed
addInternationalOption={false}
React warning.
- Added
react-hook-form@7
support.
- Fixed a minor small bug when
defaultCountry
is selected as the country even when the initialvalue
couldn't possibly belong to that country.
- Added
react-hook-form
components.
- Fixed determining the
country
for a very incompletevalue
whenvalue
is set externally.
- Fixed entering phone number digits in "force international" mode when the prefix is selected.
-
Fixed "International" option not being added.
-
Added
"🌐"
("International") option tocountryOptionsOrder
.
- Fixed the ability to erase country calling code when
countryCallingCodeEditable={false}
.
-
displayInitialValueAsLocalNumber={true}
property is deprecated: it has been replaced withinitialValueFormat="national"
property. The old property still works in version3.x
. -
Added
countryCallingCodeEditable={false}
property on a "with country select" component: wheninternational
istrue
, then, by default, the "country calling code" part of a phone number is editable. PassingcountryCallingCodeEditable={false}
property makes it non-editable.
-
Added
focusInputOnCountrySelection: boolean
property. If set tofalse
, will not focus the<input/>
component when the user selects a country from the list of countries. This can be used to conform to the Web Content Accessibility Guidelines (WCAG). Quote: "On input: Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behaviour before using the component". -
Added
international: false
property that doesn't allow international phone number format during input. Some hypothetical people could hypothetically already be passing something likeinternational={condition ? true : false}
in their apps, meaning that this new version's behavior regardinginternational={false}
could potentially come as a surprise for them, but that would be an indefinitely small minority, and it wouldn't strictly speaking break their apps because users would still be able to input their phone number.
-
Added
withCountryCallingCode
property on the/input
component: whencountry
is set andinternational
istrue
andwithCountryCallingCode
istrue
then the "country calling code" part of the phone number will be included in the<input/>
field. -
Added an experimental React Native exported component (see the README).
-
"With country select" component in "force international mode" now appends "leading digits" for some countries when pre-populating the initial phone number prefix.
- Fixed a bug when resetting
defaultCountry
property of a "with country select" component produced an error.
-
Removed
--PhoneInputCountryFlag-width
CSS variable. -
Added
--PhoneInputCountryFlag-aspectRatio
CSS variable.
Relevant changes:
-
The component uses hooks now, so
react >= 16.8
is required. -
ref
is now forwarded to the<input/>
. -
style.css
now uses native CSS variables. Native CSS variables work in all modern browsers, but older ones like Internet Explorer won't support them. For compatibility with such older browsers one can use a CSS transformer like PostCSS with a "CSS custom properties" plugin likepostcss-custom-properties
. -
Renamed CSS classes, and refactored styles.
-
Changed the flags: now they're simpler, smaller in disk size, and have
3x2
aspect ratio instead of4x3
. -
Renamed CDN
bundle
files:
react-phone-number-input-native
->react-phone-number-input
.react-phone-number-input-native-max
->react-phone-number-input-max
.react-phone-number-input-native-mobile
->react-phone-number-input-mobile
.react-phone-number-input-no-country-select
->react-phone-number-input-input
.- Removed
-react-responsive-ui
and-smart-input
versions from CDNbundle
.
-
CDN
bundle
exported global variable is now calledwindow.PhoneInput.default
(used to be calledwindow['react-phone-number-input']
), and utility functions are accessible viawindow.PhoneInput
variable. -
Removed
locale/default.json
(useen.json
instead) andlocale/br.json
(usept.json
instead). -
Flags are now loaded from
country-flag-icons
library. -
Removed properties:
error
disablePhoneInput
inputClassName
(usenumberInputProps
instead)countrySelectTabIndex
andcountrySelectAriaLabel
(usecountrySelectProps
instead)showCountrySelect
(use/input
subpackage instead to render a component without country select).ext
(this component now doesn't deal with phone number extensions at all).
-
Removed the former
inputComponent
property, and renamednumberInputComponent
property toinputComponent
. -
Renamed properties:
international
->addInternationalOption
countryOptions
->countryOptionsOrder
country
->defaultCountry
- Renamed
flagsPath
property toflagUrl
, and it's now a full URL template having{XX}
in place of a country code in upper case or{xx}
in place of a country code in lower case.
Other changes (miscellaneous):
-
Replaced
webpack
withrollup
when generating CDN bundles. -
Removed
/libphonenumber
,/native
,/custom
,/native-custom
,/react-responsive-ui
,/react-responsive-ui/custom
,/basic-input
,/basic-input-custom
,/international-icon
exports. -
Removed
parseRFC3966()
andformatRFC3966()
exported functions. -
Country select doesn't receive
icon
property as part ofoptions
now. Instead, it receivesiconComponent
property, whereiconComponent
receives acountry
property (for example,"US"
). -
Removed
redux-form
onBlur
workaround.redux-form
is deprecated. -
internationalIcon
is now 4x3, like the rest of the flags (used to be square). -
Flags have been copied from
flag-icon-css
repo's github pages to this repo's github pages. -
Added
unicodeFlags
property of country select (the demo page has a showcase).
- Added
inputStyleReset: boolean
property that can be set totrue
to prevent the library from applying decoration styles to the<input/>
.
-
Temporarily reverted back to "smart input" instead of the "basic input" (with the
smartCaret
property now beingtrue
by default). The reason is that I've added a potential workaround for Android devices toinput-format
library ("smart caret" implementation). We'll see if anyone reports anything. There have been some minor complaints about "basic caret" not being "smart" enough by always jumping to the end of the input field. -
Added
isPossiblePhoneNumber(string): boolean
exported function: it checks if the phone number is "possible". Only checks the phone number length, doesn't check the number digits against any regular expressions likeisValidPhoneNumber()
does. -
Added
getCountries(): string[]
exported function (returns an array of all possible country codes). -
Added
international={true}
property to "without country select" input. Ifcountry
property is passed along withinternational={true}
property then the phone input will be input in "international" format for thatcountry
(without "country calling code"). For example, ifcountry="US"
property is passed to "without country select" input then the phone number will be input in the "national" format forUS
((213) 373-4253
). But if bothcountry="US"
andinternational={true}
properties are passed then the phone number will be input in the "international" format forUS
(213 373 4253
) (without "country calling code"+1
). This -
Added
defaultCountry: string
anduseNationalFormatForDefaultCountryValue: boolean
properties to "without country select" input. -
Added
smartCaret
property to "without country select" input. It's the same one as thesmartCaret
property of the default ("with country select") phone number input. That also means that "without country select" input now defaults to "smart caret" mode rather than "basic caret" mode. -
Added
countryCallingCode
property to "without country select" input. Whencountry
property is passed along withinternational={true}
property then by default the phone number will be input in the "international" format forUS
(+1 213 373 4253
). However, ifcountryCallingCode={false}
property is passed then the country calling code part (+1
) will be omitted, and the phone number will be input in the "international" format forUS
without "country calling code" (213 373 4253
). -
Removed
redux-form
onBlur bug workaround from the recently introduced "without country select" component. If there're anyredux-form
bugs then the new versions of this library won't be fixing them.redux-form
has been deprecated for a long time. -
Added
reset: any
property that resetsvalue
andcountry
whenever it's changed. It's not implemented as some instance.reset()
method becauseref
will likely be forwarded to<input/>
.
-
The previous "patch" version bump that added
numberInputComponent
property should actually have been a "feature" version bump, so bumping "feature" version now. -
The country is now reset in cases when a user erases a phone number that has been input in international format. This fixes the cases when a user tries to input their local phone number when no country has been selected and ends up with an international phone number and a randomly selected country. Then such user erases the
<input/>
contents and tries inputting their local phone number again (now with the random country being selected) — this results in a seemingly-correct phone number but the reality is that the country of the phone number is completely unrelated (random). The change in this release fixes that: when a user erases all digits of an international number the random-selected country is reset. -
Added
numberInputProps
andcountrySelectProps
. If a custominputComponent
property has been specified then this newnumberInputProps
property might result in an"Unknown prop "inputProps" on <input> tag"
React warning because this newnumberInputProps
property is most likely passed as{...rest}
to the underlying<input/>
. But such warning isn't considered a "breaking change", and it's unlikely that anyone actually passed their owninputComponent
due to the complexity. -
Added an
/input
subpackage that exports the "Without country select" phone number input component. The previously proposed/basic-input
subpackage is now deprecated. -
Added
prevInput
argument toparseInput()
function ofinput-control.js
. It's unlikely that anyone used it directly asimport { parseInput } from 'react-phone-number-input/commonjs/input-control'
. But if anyone did then such code would break because the function's arguments changed. -
(misc) Removed the unintuitive "magic" phone number digits conversion logic when a phone number in international format has been input and then the user decides to select another country: previously it replaced the "country calling code" of the previous country with the "country calling code" of the new country keeping the international format of the phone number. It has been noticed that selecting a country manually having an international phone number already typed in most likely corresponds to the cases when the user tried typing in a local phone number with no country selected resulting in an international number being input and a random country being selected. Then such user decides to select the correct country manually and expects his input to be corrected back to "local" format. See the original issue.
- Added
numberInputComponent
property which is supposed to replaceinputComponent
property for the end users: it turned out that passing custominputComponent
required also implementing (copy-pasting) phone number parsing and formatting logic. The newnumberInputComponent
customization property is different in this aspect: it's a customization property ofinputComponent
itself. By defaultnumberInputComponent
is"input"
meaning thatinputComponent
renders a standard DOM<input/>
by default. By passing a customnumberInputComponent
this standard DOM<input/>
can be replaced by such custom number input component (for example, when using UI libraries like "Material UI" or "Bootstrap"). The formerinputComponent
property still works, it's just now an undocumented one (too complex for the end users to implement). And it now also receives a newinputComponent
property that is basically the newnumberInputComponent
property, just with a shorter name — this new property might result in an"Unknown prop "inputComponent" on <input> tag"
React warning, but that's only in the cases when a custominputComponent
was passed earlier which is unlikely (it's unlikely that anyone actually passed their owninputComponent
).
-
Added
countrySelectAriaLabel: string
property. -
Added
getCountryCallingCode(country: string): string
exported function.
-
Added an exported
parsePhoneNumber(value)
function because some people requested a function to getcountry
fromvalue
. -
Added
parseRFC3966()
andformatRFC3966()
exports (phone number extensions).
-
Changed the "International" flag icon.
-
Fixed
react-phone-number-input/flags
import.
-
Recently I removed some of the countries from the list of selectable countries because they weren't supported by Google's
libphonenumber
: previously I didn't check if all the selectable countries were supported (for some reason) so the list of countries contained some countries which weren't supported bylibphonenumber
which in turn would result in incorrect phone number parsing/formatting (countries like Abkhazia and South Osetia, for example). -
I also added Kosovo to the list. It's not a country but a "territory" instead. I imagine people from Kosovo might be looking for "Kosovo" in the list and they'd be confused if it was missing. Google supports
XK
territory code and the flag forXK
has been recently added to the flags repo. Anyone using customflagsPath
should update their flag bundles accordingly. -
Also added
TA
andAC
countries to the list but they're usingSH
flag for now, so no need to update flags for them yet. If the author of the flags repo adds the flags forTA
andAC
then the flags will have to be updated. See the issue in the flags repo for more info. -
Also note that when supplying custom
flagsPath
those custom-hosted flags might go out of sync with the list of countries. For example, there could be people hosting their own copy of flags, and thenXK
flag is added to the flags repo and I add "Kosovo" territory to the list and nowXK
flag is missing from all custom-hosted flag bundles and if those people update this library to the latest version without updating their custom-hosted flag bundled they'd get an "Image not found" error when selecting "Kosovo" territory from the list.
-
Migrated
input-control.js
to the latestlibphonenumber-js
API. -
Added
/min
,/max
,/mobile
and/custom
subpackages pre-wired with different flavors of metadata. See the relevant readme section for more info.
- Deprecated importing from
react-phone-number-input/libphonenumber
sub-package (a workaround for ES6/CommonJS double import issue) because the ES6/CommonJS double import issue has been resolved.
- Added
.react-phone-number-input--focus
CSS class. Issue.
- Changed the output of
AsYouType
formatter. E.g. before forUS
and input21
it was outputting(21 )
which is not good for phone number input (not intuitive and is confusing). Now it will not add closing braces which haven't been reached yet by the input cursor and it will also strip the corresponding opening braces, so forUS
and input21
it now is just21
, and for213
it is(213)
.
- Lowered React requirements back to
0.14
(same as for version 1.x of this library).
-
(breaking change)
/native
is now the default export.react-responsive-ui
select is now exported asreact-phone-number-input/react-responsive-ui
. -
(breaking change) Migrated
react-responsive-ui
country select from0.10
to0.13
. It no longer has text input functionality (like "autocomplete") — it's just a<select/>
now, without any text input field. Removedrrui.css
file (usereact-responsive-ui/style.css
bundle instead, or import styles individually fromreact-responsive-ui/styles
). RenamedmaxItems
property toscrollMaxItems
. RemovedcountrySelectToggleClassName
property (unused). -
(breaking change)
smartCaret
is nowfalse
by default (previously wastrue
). This was done because some Samsung Android phones were having issues withsmartCaret={true}
(which was the default in version1.x
).smartCaret
has been removed for now, so that it doesn't includeinput-format
library code. -
(breaking change)
international
property is nowtrue
by default meaning that by default there will always be the "International" option in the country<select/>
. -
(breaking change) CSS changes: renamed
.react-phone-number-input__phone--native
CSS class to.react-phone-number-input__phone
, added new.react-phone-number-input__input
CSS class (the phone input). -
(breaking change) Removed undocumented exports.
-
(breaking change) For
/custom
componentlabels
andinternationalIcon
properties are now required (previously werereact-phone-number-input/locales/default.json
andreact-phone-number-input/commonjs/InternationalIcon
by default). -
(breaking change) Removed
/resources
directory (due to not being used).
- Added
react-phone-number-input/basic-input
component.
- Some CSS tweaks and code refactoring.
-
Added an isolated
react-phone-number-input/native
export (so that it doesn't includereact-responsive-ui
package in the resulting bundle). -
Some CSS tweaks.
-
countrySelectComponent
onToggle
property renamed tohidePhoneInputField
.
-
Added
PhoneInputNative
exported component which deprecateds the oldnativeCountrySelect={true/false}
property.PhoneInputNative
component doesn't requirerrui.css
. It will be the default exported component in version2.x
. -
Fixed a minor bug appering in React 16.4 which caused the currently selected country flag to be reset while typing.
- Added an optional
smartCaret={false}
property for fixing Samsung Android phones.
-
(breaking change) Changed the properties passed to a custom
inputComponent
, seeInput.js
propTypes
for more info. -
Added
BasicInput
: an alternativeinputComponent
for working around the Samsung Galaxy caret positioning bug.
-
(breaking change) Rewrote
Input.js
— there is a possibility that something could potentially break for users coming from previous versions. -
(breaking change) No longer exporting
libphonenumber-js
functions. -
(breaking change)
dictionary
's"International"
key renamed to"ZZ"
. -
(breaking change)
dictionary
property renamed tolabels
. -
(breaking change)
nativeExpanded
property renamed tonativeCountrySelect
. -
(breaking change)
selectTabIndex
property renamed tocountrySelectTabIndex
. -
(breaking change)
selectMaxItems
property renamed tocountrySelectMaxItems
. -
(breaking change)
selectAriaLabel
property renamed tocountrySelectAriaLabel
. -
(breaking change)
selectCloseAriaLabel
property renamed tocountrySelectCloseAriaLabel
. -
(breaking change)
selectComponent
property renamed tocountrySelectComponent
-
(breaking change)
flagComponent
'scountryCode
property was renamed to justcountry
. -
(breaking change) Renamed
countries with flags.js
toflags.js
and put them in the root folder. -
(breaking change)
flags
property changed: it can no longer be aboolean
and can only be an object of flagReact.Component
s. -
(breaking change)
selectStyle
andinputStyle
properties removed (due to not being used). -
(breaking change)
inputTabIndex
property removed (usetabIndex
instead). -
(breaking change)
onCountryChange
property removed (no one actually used it). -
(breaking change)
convertToNational
property renamed todisplayInitialValueAsLocalNumber
. -
(breaking change)
style.css
changed a bit (to accomodate phone number extension field). -
(breaking change) If someone did override
.rrui__input:not(.rrui__input--multiline)
CSS rule then now it has been split into two CSS rules:.rrui__input
and.rrui__input--multiline
. -
Added
locale
s for thelabels
property (ru
anden
). -
Added
ext
property for phone number extension input.
-
(breaking change) Fixed SVG flag icons for IE. This alters the markup a bit:
<img/>
is now wrapped in a<div/>
and the CSS class of the image becomes the CSS class of the div and also a new CSS class for the image is added. This could hypothetically be a breaking change in some advanced use cases hence the major version bump. -
Fixed
<Select/>
scrolling to the top of the page in IE <= 11. -
Fixed validation error margin left.
- Updated
libphonenumber-js
to1.0.x
. parsePhoneNumber()
,isValidPhoneNumber()
andformatPhoneNumber()
no longer acceptundefined
phone number argument: it must be either astring
or a parsed numberobject
having astring
phone
property.
-
Added
error
andindicateInvalid
properties for displaying error label. -
(CSS breaking change)
react-phone-number-input
<div/>
is now wrapped by another<div/>
and its CSS class name changed toreact-phone-number-input__row
andreact-phone-number-input
CSS class name goes to the wrapper.
- Returning
<input/>
type
back totel
. There used to be reports previously thatinput="tel"
<input/>
s on some non-stock Android devices with non-stock keyboards had issues with proper caret positioning during input. Well, those are non-stock Android bugs and therefore they should fix those there.type="tel"
is better in terms of the digital input keyboard so it's now a default. Still can be overridden by passingtype="text"
property.
This release contains some minor CSS class names refactoring which most likely won't introduce any issues in almost but all use cases.
(CSS breaking change) Refactored <Select/>
CSS class names in react-responsive-ui
:
-
.rrui__select__selected--autocomplete
->.rrui__select__autocomplete
-
.rrui__select__selected
->.rrui__select__button
-
.rrui__select__selected--nothing
->.rrui__select__button--empty
-
.rrui__select__selected--expanded
->.rrui__select__button--expanded
-
.rrui__select__selected--disabled
->.rrui__select__button--disabled
(CSS breaking change) Added .rrui__text-input__input
CSS class to the phone number <input/>
.
(CSS breaking change) Added global .rrui__text-input__input
styles to style.css
- Due to the reports stating that
type="tel"
caret positioning doesn't work on Samsung devices the component had to revert back totype="text"
by default (one can passtype="tel"
property directly though).
- (breaking change) The default value of
convertToNational
property changed fromtrue
tofalse
. The reason is that the newer generation grows up when there are no stationary phones and therefore everyone inputs phone numbers with a+
in their smartphones so local phone numbers should now be considered obsolete.
- Now alphabetically sorting the supplied custom country names
- Fixed a bug when
value
was not set toundefined
when the<input/>
value was empty - Added
selectMaxItems
property for customizing the country select height
- (CSS breaking change) Removed vertical padding from the first and the last
<Select/>
<li/>
options and moved it to.rrui__select__options
<ul/>
itself. So if someone customized.rrui__select__options-list-item:first-child
and.rrui__select__options-list-item:last-child
vertical padding then those padding customizations should be moved to.rrui__select__options
itself. - (CSS breaking change) Added
.rrui__select__option:hover
and.rrui__select__option--focused:hover
background color for better UX.
- (might be a breaking change) Slightly refactored the component CSS improving it in a couple of places along with adding comments to it (see
style.css
). - Added country code validation.
- (breaking change) Moved the
.css
file to the root folder of the package and split it into two files (therrui
one is not required when already usingreact-responsive-ui
).import
ing the CSS file via Webpack is the recommended way to go now. - (breaking change) Vendor prefixes dropped in favour of manually using autoprefixers.
- Added support for externally changing
value
property
- Added
inputTabIndex
andselectTabIndex
settings
- Added
nativeExpanded
setting for native country<select/>
- The
.valid
property has been removed from "as you type" formatter, therefore dropping the.react-phone-number-input__phone--valid
CSS class. This doesn't affect functionality in any way nor does it break existing code therefore it's a "patch" version upgrade.
- (could be a breaking change) Moving CSS positioning properties from inline styles to the CSS file therefore if using an edited CSS file from older versions (when not doing it via Webpack
require(...)
) update styles for.rrui__select
and.rrui__select__options
. As well as.rrui__expandable
and.rrui__shadow
have been added. Maybe (and most likely) something else, so better re-copy the entire CSS file.
- Fixed a small bug when an initially passed phone number
value
wasn't checked for country autodetection - A small enhancement: when an international phone number is erased to a single
+
then the currently selected country is reset. And, analogous, when a country is selected, and the input is empty, and then the user enters a single+
sign — the country is reset too.
- Fixed a small bug when the
country
property was set after page load programmatically and that caused the input taking focus (which displayed a keyboard on mobile devices)
@JeandeCampredon
fixedConst declarations are not supported in strict mode
in module exports
- Added custom metadata feature (now developers have a way to reduce the resulting bundle size in case they decide they need that)
lockCountry
property removed (usecountries={[country]}
instead)- Added
international
boolean property to explicitly indicate whether to show the "International" option in the list of countries - Not showing country
<Select/>
whencountries.length === 1
orcountries.length === 0
countries
property can now only be an array of country codes
- Fixed the flags bug introduced by adding
flags={ false }
option
- Added
flags={ false }
option
- Added
lockCountry
option - Added a possibility to specify
countries
as an array of country codes - Fixed country selection on
country
property update
- Optimized performance on mobile devices
- Added a bunch of CSS classes:
react-phone-number-input
,react-phone-number-input--valid
,react-phone-number-input__country
,react-phone-number-input__phone
,react-phone-number-input__phone--valid
- Now hiding the phone input while the country select is open
- Fixed collapsed select options being interactive in iOS 8 Safari
- A complete rewrite. Now supports all countries, all formats are hard-coded from Google Android's
libphonenumber
library.
- Hong Kong phone numbers fix by @nchan0154
- Added some popular country formats (and stubs for other countries)
- Small bug fix for trunk prefixed phone numbers
format
prop is now not required for the React component. Ifformat
is not specified then the input switches itself into "auto" (iPhone style) mode.- input code rewrite
- (breaking change)
digits
passed to thetemplate()
function don't include trunk prefix anymore - Introduced custom
valid(digits)
phone number validation function for phone number format
-
format_phone_number
(akaformatPhoneNumber
) function now formats phone number internationally (with country code) if noformat
argument was supplied (it tries to autodetect the correct phone number format from the phone number itself) -
Added
country(phone)
function -
Added
country_from_locale(locale)
(akacountryFromLocale(locale)
) function
- Added
parse_phone_number
(akaparsePhoneNumber
) function
- Added
plaintext_local
(akaplaintextLocal
) andplaintext_international
(akaplaintextInternational
) methods
- Added custom phone formats
- Refactoring
- Removed
format_phone_number_international
(akaformatPhoneNumberInternational
)
- Added
disabled
property
- Added
name
property (for javascriptless websites)
- Initial release