Allow defaultCountry to be extracted from initial value
See original GitHub issueHi there, I’m currently using the package with the defaultCountry
prop set to “FR” as most numbers are French. However some numbers have different formats, eg an initial value for the component may be a UK number “+44…”.
import React, { useState } from "react";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";
import fr from "react-phone-number-input/locale/fr";
export default function App() {
// If number coming in from DB isn't French...
const [phone, setPhone] = useState("+44788977366");
return (
<div className="App">
<h1>Phone numbers</h1>
<PhoneInput
initialValueFormat="national"
labels={fr}
defaultCountry="FR"
countries={["FR", "GB"]}
value={phone}
onChange={setPhone}
/>
<p>{phone}</p>
</div>
);
}
![Screenshot 2021-03-23 at 15 58 56](https://user-images.githubusercontent.com/7061578/112167389-b335ee00-8bf0-11eb-8707-7de995828354.png)
Is there any way I can set defaultCountry
to be updated to match the initial value? Or force an update to the correct flag?
Or failing that are there any utility functions perhaps to determine the countryCode from the number? I could then use this to run a useEffect
Many thanks!
https://codesandbox.io/s/phone-numbers-1l9pi?file=/src/App.js:0-628
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
How do I remove the international option in React Phone ...
— If defaultCountry is specified then the phone number can be input both in "international" format and "national" format. A phone number that's ......
Read more >default country field bug | WordPress.org
When refreshing the checkout page, Firefox was setting the Country and State fields the value taken on the first time the page was...
Read more >Oracle Fusion Cloud Oracle Human Resources 21D What's New
To defer the I9 creation, enable this profile option by updating the value to Y. Profile Option Code, Description, Default. ORA_PER_CHECKLIST_DEFER_I9_CREATION.
Read more >Display System Value (DSPSYSVAL) - IBM
This system value specifies the action to be taken by the system if errors occur when an audit journal ... QCNTRYID: Default country...
Read more >Country Code Picker Library - GitHub
By default, CCP will checking for country code from time zone if no default country code set and no country code is found...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I have still fixed the bug though: https://gitlab.com/catamphetamine/react-phone-number-input/-/commit/779b130247b0ba25d1f7d7650530bba2bc8c2d03 Your demo doesn’t show France now in the case you’ve described: https://codesandbox.io/s/phone-numbers-forked-8b1cy?file=/src/App.js
Hmm, looks like
+44 7889 77366
doesn’t belong to any country. https://libphonenumber.appspot.com/phonenumberparser?number=%2B44+7889+77366&country=RUWhat icon would you suggest the library show in such case? Will “international” icon be appropriate?