CODEWITHSUNDEEP
react-phone-number-input
Divya Agarwal
Divya Agarwal

Reputation: 21

Phone Input field flag and name of country

I have used PhoneInput. It is working perfectly but I want name along with flag but in this code only flag is showing. Can it possible to show both name and flag of country. Here is my code-

 <PhoneInput  className="bcont" value={user.bcontact} onChange={bcontact => setUser({ bcontact })}/>

Upvotes: 0

Views: 1196

Answers (1)

Mohamed Elgazar
Mohamed Elgazar

Reputation: 794

There are a few ways to achieve this:

  1. Use the PhoneInput.getCountryData() method to retrieve an array of country data objects. Each object in the array contains a name and flag property. Then, use the array index of the selected country to display the corresponding name and flag.

  2. Use the PhoneInput.onCountryChange() event to trigger a function that updates the state with the selected country's name and flag.

  3. Use the PhoneInput.formatNumber() method to format the phone number as a string with the country code and name. The country code can be used to lookup the country name and flag from an external data source.

Upvotes: 2

Related Questions