Get Instant Country Flags

While working on one of my projects, there is one feature where I need to display a specific flag depending upon the country code.

My first approach was to get the country flags’ zip file and extract it locally from the images folder.
You can downloa…


This content originally appeared on DEV Community and was authored by Nirazan Basnet

While working on one of my projects, there is one feature where I need to display a specific flag depending upon the country code.

My first approach was to get the country flags' zip file and extract it locally from the images folder.
You can download the list of country flags from here.

I thought this can be easy. Then, I thought as the project was on ReactJs, I wonder there might be an API for the country flags.

Then I came across,
Country Flags - A simple API to load any country flags

So, how does it work:

HTML 

<img src="https://www.countryflags.io/:country_code/:style/:size.png">

Example 

<img src="https://www.countryflags.io/be/flat/64.png">
<img src="https://www.countryflags.io/be/shiny/64.png">

Themes

Currently, they have two themes - flat and shiny

Sizes

Supported sizes are :
**16 for 16px wide flags
**24 for 24px wide flags
**32 for 32px wide flags
**48 for 48px wide flags
**64 for 64px wide

Simple Data Map Syntax in ReactJs

Code:

function CountryList() {
  const countries_code = ["au", "af", "bd", "br", "in"];

  return (
    <div className="country-list">
      <ul>
        {countries_code.map((country_code, index) => (
          <li key={index}>
            <img
              src={`https://www.countryflags.io/${country_code}/flat/64.png`}
              alt="..."
            />
          </li>
        ))}
      </ul>
    </div>
  );
}
);

You can check out the demo link here

Conclusion
?? By coming this far I hope you can implement this awesome country flag API on your project. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers


This content originally appeared on DEV Community and was authored by Nirazan Basnet


Print Share Comment Cite Upload Translate Updates
APA

Nirazan Basnet | Sciencx (2021-04-09T07:23:10+00:00) Get Instant Country Flags. Retrieved from https://www.scien.cx/2021/04/09/get-instant-country-flags/

MLA
" » Get Instant Country Flags." Nirazan Basnet | Sciencx - Friday April 9, 2021, https://www.scien.cx/2021/04/09/get-instant-country-flags/
HARVARD
Nirazan Basnet | Sciencx Friday April 9, 2021 » Get Instant Country Flags., viewed ,<https://www.scien.cx/2021/04/09/get-instant-country-flags/>
VANCOUVER
Nirazan Basnet | Sciencx - » Get Instant Country Flags. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/09/get-instant-country-flags/
CHICAGO
" » Get Instant Country Flags." Nirazan Basnet | Sciencx - Accessed . https://www.scien.cx/2021/04/09/get-instant-country-flags/
IEEE
" » Get Instant Country Flags." Nirazan Basnet | Sciencx [Online]. Available: https://www.scien.cx/2021/04/09/get-instant-country-flags/. [Accessed: ]
rf:citation
» Get Instant Country Flags | Nirazan Basnet | Sciencx | https://www.scien.cx/2021/04/09/get-instant-country-flags/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts