Получите мгновенные флаги стран

Во время работы над одним из моих проектов есть одна функция, в которой мне нужно отображать определенный флаг в зависимости от кода страны.

Мой первый подход заключался в том, чтобы получить zip-файл с флагами страны и извлечь его локально из папки с изображениями.
Список флагов стран можно скачать здесь.

Я думал, что это может быть легко. Затем я подумал, поскольку проект был на ReactJs, интересно, может быть API для флагов стран.

Затем я наткнулся на
Флаги стран — простой API для загрузки флагов любых стран.

Итак, как это работает:

HTML

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

Пример

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

Темы

В настоящее время у них есть две темы — плоская и блестящая.

Размеры

Поддерживаемые размеры:
**16 для флагов шириной 16 пикселей
**24 для флагов шириной 24 пикселя
**32 для флагов шириной 32 пикселя
**48 для флагов шириной 48 пикселей
**64 для флагов шириной 64 пикселя

Простой синтаксис карты данных в 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>
  );
}
);

Вы можете ознакомиться с демо-ссылкой здесь

Заключение
👏👏 Зайдя так далеко, я надеюсь, что вы сможете внедрить этот замечательный API флага страны в свой проект. Итак, я предлагаю вам попробовать его на вашем проекте и наслаждаться им!

Не стесняйтесь поделиться своими мыслями и мнениями и оставить мне комментарий, если у вас есть какие-либо проблемы или вопросы.

А пока,
Продолжайте взламывать, Удачи!

Первоначально опубликовано на https://dev.to 9 апреля 2021 г.