Add Country Flags to Your App With This API - countryflags.io alternative
Tags: webdev, tutorial, react, javascript
Published: 2021-12-21 20:53:40

*I am going to be shutting down this service as of 3/12/23. If you would like to run your own instance of this, go to the [country flags repository](https://github.com/JeremyPersing/countryflagsapi), download the code and run it on your own VPS.*

## Introduction

I was recently working on a project that required me to implement country flags into the application. At the time, countryflags.io was a popular API that people were using, so I decided that I should rely on it for my project. While integrating the endpoints for countryflags.io into my application, I noticed that they only allowed user's to retrieve a country's flag by a two letter code. For example, if I wanted to get the flag of the United States, the endpoint would be `https://www.countryflags.io/us/flat/64.png`. This was a problem because my data didn't identify countries by their two letter codes. Another problem I ran into is that the server of countryflags.io went down half way through the project. So to fix these problems, I created my own API that allows users to get a country's flag by the country's name, its two letter code (ISO Alpha 2 code), its three letter code (ISO Alpha 3 code), and its UN Code. The codes for each country can be found at [countryflagsapi.com](https://www.countryflagsapi.com). Here are a few example endpoints 
https://countryflagsapi.com/png/br
https://countryflagsapi.com/png/brazil
https://countryflagsapi.com/svg/076
https://countryflagsapi.com/svg/bra

## Running Your Own Instance

If you wish to run your own instance of this API, you can download the source code [here](https://github.com/JeremyPersing/countryflagsapi). If you would prefer to just pull a docker image of the API, you can get that [here](https://hub.docker.com/repository/docker/jeremypersing/countryflagsapi)

## Getting a Flag from User Input

I'll be using React for this demo. Keep in mind this is a basic demo, but this will probably be similar to what you will want
to use in your app.

### Imports

```js
import React, { useState } from 'react'
```

### States and Functions

```js
const [flagURL, setFlagURL] = useState('https://countryflagsapi.com/png/cuba')
const [identifier, setIdentifier] = useState('')

const handleButtonClick = () => {
  // can use https://countryflagsapi.com/svg/ here too
  const url = 'https://countryflagsapi.com/png/'
  setFlagURL(url + identifier)
}
```

### JSX

```js
<div style={{ marginBottom: '20px' }}>
    <input
      name="country"
      type="text"
      onChange={(e) => setIdentifier(e.target.value)}
      value={identifier}
      placeholder="Enter a country name, UN Code, ISO Alpha-2, or ISO Alpha-3 Code"
    />
    <button onClick={handleButtonClick}>Get Flag</button>
</div>
<img src={flagURL} alt="flag" />
```

## Embedding an Image

Go to the flag that you want to embed and click the button labeled "Embed SVG" or "Embed PNG". A modal will then appear like the one shown in the image below. Go ahead and click copy and then paste the img element into your source code.

![Embed an img element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l2imjjawnkmqy8qm16m.png)