Get Instant Country Flags

nirazanbasnet

โšก Nirazan Basnet โšก

Posted on April 9, 2021

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://flagcdn.com/:size/:country_code.png">
Enter fullscreen mode Exit fullscreen mode

Example

<img src="https://flagcdn.com/48x36/za.png">
Enter fullscreen mode Exit fullscreen mode

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((code, index) => (
          <li key={index} className="mr-16">
            <img src={`https://flagcdn.com/48x36/${code}.png`} alt="..." />
          </li>
        ))}
      </ul>
    </div>
  );
}
);
Enter fullscreen mode Exit fullscreen mode

You can check out the demo link here


Conclusion
๐Ÿ‘๐Ÿ‘ By coming this far I hope you can implement this awesome country flag CDN & 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

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
nirazanbasnet
โšก Nirazan Basnet โšก

Posted on April 9, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About