Fetching Country flags emojis from API in react

programming web dev
1

I have a small piece of code from a weather App where it is supposed to look for any city’s weather after searching the name but also fetch the country flag of that city from this website https://www.countryflags.io but it is down now.

I wonder if there is any alternatives to do this in my code?

   getWeather();
     return () => clearTimeout(loadingIndicatorTimeout);
  }, [location]);

const { flagIcon, countryCode } = React.useMemo(() => {
    return {
        flagIcon: weatherData.sys ? `https://www.countryflags.io/${weatherData.sys.country}/shiny/32.png` : "",
        countryCode: weatherData.sys ? weatherData.sys.country : "",
    };
}, [weatherData]);

return (
    <>
        <div className={classes.headerLine}>
            <Typography className={classes.location} variant="h5">
                {location}
            </Typography>
            {flagIcon && <img alt={countryCode} src={flagIcon} />}
        </div>
        <div className={classes.detailLine}>
            <LoadingIndicator isLoading={isLoading} />
            <ErrorMessage apiError={apiError} />
            <WeatherDisplay weatherData={weatherData} />
        </div>
    </>
);
2

Is the site down permanently or just a temporary glitch? The countryflags.io service is the one that I know about the most, so it may be worth waiting for it to come back online :slight_smile:

3

There are several alternatives. My recommendation is to use Country Flag Icons
It will fit your project perfectly.

In the case of your application, it would look like this:

flagIcon: weatherData.sys ? `https://catamphetamine.gitlab.io/country-flag-icons/3x2/${weatherData.sys.country}.svg` : "",
1 Like