Open Flags Docs

Appearance

Standard JavaScript ​

First Install

Example Usage ​

js
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flags</title>
</head>
<body>
  <div>
    <h1>Flags</h1>
    <input id="country-input" type="text" placeholder="Enter country code" />
    <div id="flags-container"></div>
  </div>

  <script type="module">
    import { getAllFlags, getFlagsByCountry, getFlagSvg } from 'open-flags';

    const countryInput = document.getElementById('country-input');
    const flagsContainer = document.getElementById('flags-container');

    const renderFlags = (flags) => {
        <!-- use below if needed -->
      <!-- flagsContainer.innerHTML = ''; -->
      flags.forEach((flag) => {
        const [country, region] = flag.split('/');
        const svgContent = getFlagSvg(country, region);
        const flagDiv = document.createElement('div');
        flagDiv.innerHTML = `<h2>${flag}</h2><img src=${svgContent} alt='flag'/>`;
        flagsContainer.appendChild(flagDiv);
      });
    };

    countryInput.addEventListener('input', () => {
      const country = countryInput.value.toLowerCase();
      const flags = country ? getFlagsByCountry(country) : getAllFlags();
      renderFlags(flags);
    });

    renderFlags(getAllFlags());
  </script>
</body>
</html>