Using CDN (No npm)

This page is for prototyping and online sandboxes.

If you control your build, prefer installing from npm and bundling locally (best performance and offline support).

Quick start (esm.sh)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19",
          "react-dom/client": "https://esm.sh/react-dom@19/client",
          "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime"
        }
      }
    </script>
  </head>
  <body>
    <div id="root"></div>

    <script type="module">
      import { createRoot } from 'react-dom/client'
      import { FlagUs } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagUs'

      function App() {
        return <FlagUs width={64} height={64} title="US" />
      }

      createRoot(document.getElementById('root')).render(<App />)
    </script>
  </body>
</html>

Import only what you need

Most ESM CDNs support an exports query to avoid pulling in unused exports.

import {
  FlagCn,
  FlagUs,
} from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagCn,FlagUs'

Runtime codes (finite set)

When country codes are runtime values, keep it offline-first by mapping a finite set:

import {
  FlagCn,
  FlagGb,
  FlagUs,
} from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagCn,FlagGb,FlagUs'

const FLAGS = { cn: FlagCn, gb: FlagGb, us: FlagUs }

export function CountryFlag({ code }) {
  const normalized = String(code).toLowerCase()
  const Flag = FLAGS[normalized]
  return Flag ? <Flag width={36} height={36} /> : <span>{String(code).toUpperCase()}</span>
}

Version pinning

import { FlagUs } from 'https://esm.sh/@sankyu/react-circle-flags?exports=FlagUs'
import { FlagUs } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagUs'

CDN options

All of these provide ESM support with dependency resolution:

esm.sh

Great defaults, good caching, widely used.

Skypack

Stable ESM CDN with long history.

esm.run

Fast ESM CDN (jsDelivr ecosystem).