recently I implemented a custom react input phone but I can't display country flags in the options and in the selected country. actually, I cant use the PhoneInput directly because I need to extract the country and send its label to the server (like: 'US'). if do you have any idea for displaying flags in the custom inputs or extracting selected country labels in the default PhoneInput, please answer.
thanks
this is my code lines:
import Input, {
getCountries,
getCountryCallingCode,
} from "react-phone-number-input/input";
import en from "react-phone-number-input/locale/en.json";
import "react-phone-number-input/style.css";
const RegisterForm = () => {
const [onFocuseInput, setOnFocuseInput] = useState("");
const [phoneNumber, setPhoneNumber] = useState();
const [country, setCountry] = useState();
const CountrySelect = ({ value, onChange, labels, ...rest }) => (
<select
{...rest}
value={value}
onChange={(event) => {
onChange(event.target.value || undefined);
}}
>
<option value="">country</option>
{getCountries().map((country) => (
<option key={country} value={country}>
{labels[country]} +{getCountryCallingCode(country)}
</option>
))}
</select>
);
<div className="mb-6 flex">
<CountrySelect
className={`border-b-2 bg-none outline-none w-1/4 text-xs ${
onFocuseInput === "country"
? "border-blue-700 "
: "border-gray-300"
}`}
labels={en}
value={country}
onChange={setCountry}
name="countrySelect"
onFocus={() => setOnFocuseInput("country")}
/>
<Input
className={`${
onFocuseInput === "phoneNumber"
? "focusedInput w-full"
: "registerInput w-full"
}`}
placeholder="phoneNumber"
dir="ltr"
country={country}
value={phoneNumber}
onChange={setPhoneNumber}
name="phoneNumber"
onFocus={() => setOnFocuseInput("phoneNumber")}
required
/>
</div>
{loading ? (
<div className="flex justify-center items-center my-5 bg-red-600 p-4 rounded-full">
<div
className="spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-700 border-t-white rounded-full"
role="status"
></div>
</div>
);
};
export default RegisterForm;
recently I implemented a custom react input phone but I can't display country flags in the options and in the selected country. actually, I cant use the PhoneInput directly because I need to extract the country and send its label to the server (like: 'US'). if do you have any idea for displaying flags in the custom inputs or extracting selected country labels in the default PhoneInput, please answer.
thanks
this is my code lines:
import Input, {
getCountries,
getCountryCallingCode,
} from "react-phone-number-input/input";
import en from "react-phone-number-input/locale/en.json";
import "react-phone-number-input/style.css";
const RegisterForm = () => {
const [onFocuseInput, setOnFocuseInput] = useState("");
const [phoneNumber, setPhoneNumber] = useState();
const [country, setCountry] = useState();
const CountrySelect = ({ value, onChange, labels, ...rest }) => (
<select
{...rest}
value={value}
onChange={(event) => {
onChange(event.target.value || undefined);
}}
>
<option value="">country</option>
{getCountries().map((country) => (
<option key={country} value={country}>
{labels[country]} +{getCountryCallingCode(country)}
</option>
))}
</select>
);
<div className="mb-6 flex">
<CountrySelect
className={`border-b-2 bg-none outline-none w-1/4 text-xs ${
onFocuseInput === "country"
? "border-blue-700 "
: "border-gray-300"
}`}
labels={en}
value={country}
onChange={setCountry}
name="countrySelect"
onFocus={() => setOnFocuseInput("country")}
/>
<Input
className={`${
onFocuseInput === "phoneNumber"
? "focusedInput w-full"
: "registerInput w-full"
}`}
placeholder="phoneNumber"
dir="ltr"
country={country}
value={phoneNumber}
onChange={setPhoneNumber}
name="phoneNumber"
onFocus={() => setOnFocuseInput("phoneNumber")}
required
/>
</div>
{loading ? (
<div className="flex justify-center items-center my-5 bg-red-600 p-4 rounded-full">
<div
className="spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-700 border-t-white rounded-full"
role="status"
></div>
</div>
);
};
export default RegisterForm;
3 Answers
Reset to default 1onCountryChange event, You can get countryCode by adding onCountryChange event listener. Attached find a code for reference.
import * as React from "react";
import { useForm, Controller } from "react-hook-form";
import PhoneInput, {
parsePhoneNumber,
getCountryCallingCode
} from "react-phone-number-input";
import "react-phone-number-input/style.css";
import "./styles.css";
export default function App() {
const [countryCode, setCountryCode] = React.useState("DE");
const {
control,
formState: { errors },
handleSubmit
} = useForm();
const onSubmit = (data) => console.log(data);
return (
<>
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="cellphone"
rules={{
validate: {
isValid: (value) => {
if (value) {
const callingCode = getCountryCallingCode(countryCode);
if (!new RegExp(`^\\+${callingCode}$`).test(value)) {
return !!parsePhoneNumber(value);
}
}
return true;
}
}
}}
control={control}
render={({ field }) => (
<PhoneInput
{...field}
onCountryChange={(v) => setCountryCode(v)}
limitMaxLength={true}
international={true}
defaultCountry="DE"
/>
)}
/>
{errors.cellphone?.type === "isValid" && (
<span className="validation-message">Enter a valid phone number</span>
)}
<input type="submit" />
</form>
</>
);
}
You can parse the value entered in the input field and get out the country code. You can use libphonenumber-js for it.
import React, { useState } from "react";
import Input, {parsePhoneNumber} from "react-phone-number-input";
import "react-phone-number-input/style.css";
const RegisterForm = () => {
const [onFocuseInput, setOnFocuseInput] = useState("");
const [phoneNumber, setPhoneNumber] = useState("");
const [country, setCountry] = useState("");
const handleChange = (value) => {
let p = "";
let c = "";
const parsedValue = parsePhoneNumber(value ? value : "", 'US');
if (parsedValue) {
p = parsedValue.nationalNumber;
c = parsedValue.countryCallingCode;
}
setPhoneNumber(p);
setCountry(c);
};
return (
<div>
<div className="mb-6 flex">
<Input
className={`${
onFocuseInput === "phoneNumber"
? "focusedInput w-full"
: "registerInput w-full"
}`}
placeholder="phoneNumber"
dir="ltr"
defaultCountry="US"
limitMaxLength
onChange={handleChange}
name="phoneNumber"
onFocus={() => setOnFocuseInput("phoneNumber")}
required
/>
</div>
</div>
);
};
export default RegisterForm;
you just have to use the property countries on your PhoneInput element phoneInput countries property example