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 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 flags

Simple Data Map Syntax in ReactJs

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

Originally published at https://dev.to on April 9, 2021.

--

--

--

Creative coder, Dreamer, Design lover, Passionate about UI/UX experience & Front-end Engineer. https://nirajanbasnet.com.np , https://codepen.io/nirazanbasnet

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to implement plug-in on C# Blazor for native JavaScript application.

Javascript with ES6

Creating Firefox browser extensions-15

React Refs…

Typescript’s useful, but not always

Browser Compatibility Test with Lambdatest and Selenium

Some react concept -Day 2

Stop skipping semicolons. Here’s why!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nirazan Basnet

Nirazan Basnet

Creative coder, Dreamer, Design lover, Passionate about UI/UX experience & Front-end Engineer. https://nirajanbasnet.com.np , https://codepen.io/nirazanbasnet

More from Medium

How to create Navbar component using React router dom v6 and React-sidenav library

Why code splitting is hard in react server side rendering?

Controlled and Uncontrolled Components

PJ’s Pooch Attires — An app built with React

PJ’s Pooch Attires Homepage with sliders that showcase store ‘all time favorite products” for customers to enjoy.