fix: Add getCountryCode function to retrieve the country code from a …

…phone number
iPagar · Feb 21, 2024 · 22ee5ed · 22ee5ed
1 parent e6461bf
commit 22ee5ed
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/use-phone-state/use-phone-state.ts b/src/use-phone-state/use-phone-state.ts
@@ -28,6 +28,14 @@ export const phoneValidationSchema = (
       }
     }, invalid);
 
+export function getCountryCode(phone: string) {
+  const parsedNumber = parsePhoneNumberFromString(phone);
+  if (!parsedNumber) {
+    return '';
+  }
+  return parsedNumber.country;
+}
+
 export function formatPhoneNumber(phoneNumber: string, country?: string) {
   const parsedNumber = parsePhoneNumberFromString(phoneNumber);
   if (!parsedNumber) {
@@ -55,7 +63,9 @@ export const usePhoneState = ({
   initialCountry = 'US',
   initialPhoneNumber = '',
 } = {}) => {
-  const [country, setCountry] = useState(initialCountry);
+  const [country, setCountry] = useState(
+    getCountryCode(initialPhoneNumber) || initialCountry
+  );
   const [phoneNumber, setPhoneNumber] = useState(
     formatPhoneNumber(initialPhoneNumber, initialCountry)
   );

diff --git a/stories/phone-input.stories.tsx b/stories/phone-input.stories.tsx
@@ -554,7 +554,9 @@ export function BasicWithCountryFlag() {
           </ul>
         </PhoneInput.Dialog>
       )}
-      <PhoneInput.NumberInput placeholder="Phone" />
+      {({ phone }) => (
+        <PhoneInput.NumberInput placeholder="Phone" value={phone} />
+      )}
     </PhoneInput.Root>
   );
 }