Skip to content
React Circle Flags @sankyu/react-circle-flags

Using CDN

Load @sankyu/react-circle-flags directly from CDN for rapid prototyping, sandboxes, or environments where npm isn’t available.

Quick Start

Section titled “Quick Start”
Section titled “Using esm.sh (Recommended)”
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@18",
          "react-dom/client": "https://esm.sh/react-dom@18/client"
        }
      }
    </script>
  </head>
  <body>
    <div id="root"></div>


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


      function App() {
        return <CircleFlag countryCode="us" width={64} />
      }


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

CDN Options

Section titled “CDN Options”

All three CDNs provide excellent ESM support with automatic dependency resolution:

Section titled “esm.sh (Recommended)”

Fast, reliable, with optimal bundle splitting and caching:

// Latest version (CircleFlag-only build)
import { CircleFlag } from 'https://esm.sh/@sankyu/react-circle-flags?exports=CircleFlag'


// Pinned version (recommended for production, CircleFlag-only build)
import { CircleFlag } from 'https://esm.sh/@sankyu/react-circle-flags@1.4.0?exports=CircleFlag'


// Pinned major version (auto-update patches)
import { CircleFlag } from 'https://esm.sh/@sankyu/react-circle-flags@^1?exports=CircleFlag'

Skypack

Section titled “Skypack”

Formerly Pika, a Snowflake-sponsored CDN:

// Latest version (CircleFlag-only build)
import { CircleFlag } from 'https://cdn.skypack.dev/@sankyu/react-circle-flags?exports=CircleFlag'


// Pinned version
import { CircleFlag } from 'https://cdn.skypack.dev/@sankyu/react-circle-flags@1.4.0?exports=CircleFlag'

esm.run

Section titled “esm.run”

Lightning-fast ESM CDN, sponsored by jsDelivr:

// Latest version (CircleFlag-only build)
import { CircleFlag } from 'https://esm.run/@sankyu/react-circle-flags?exports=CircleFlag'


// Pinned version
import { CircleFlag } from 'https://esm.run/@sankyu/react-circle-flags@1.4.0?exports=CircleFlag'

Usage Examples

Section titled “Usage Examples”

With CircleFlag (CDN-loaded SVGs)

Section titled “With CircleFlag (CDN-loaded SVGs)”
import { CircleFlag } from 'https://esm.sh/@sankyu/react-circle-flags@1.4.0?exports=CircleFlag'


// CircleFlag loads SVGs from HatScripts CDN by default
const App = () => <CircleFlag countryCode="us" width={48} />


// Or use custom CDN
const AppCustom = () => (
  <CircleFlag countryCode="io" width={48} cdnUrl="https://custom-cdn.example.com/flags/" />
)

CodeSandbox / StackBlitz

Section titled “CodeSandbox / StackBlitz”
App.js
import { CircleFlag } from 'https://esm.sh/@sankyu/react-circle-flags@1.4.0?exports=CircleFlag'


export default function App() {
  return (
    <div>
      <h1>Flags Demo</h1>
      <CircleFlag countryCode="us" width={48} />
      <CircleFlag countryCode="cn" width={48} />
    </div>
  )
}

Deno Compatibility

Section titled “Deno Compatibility”
// main.tsx (Deno)
import { CircleFlag } from 'https://esm.sh/@sankyu/react-circle-flags'
import React from 'https://esm.sh/react@18.3.1'
import ReactDOM from 'https://esm.sh/react-dom@18.3.1/client'


const App = () => <CircleFlag countryCode="us" width={48} />


ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

Version Pinning

Section titled “Version Pinning”

Custom CDN Mirrors

Section titled “Custom CDN Mirrors”

Use regional CDN mirrors for better performance:

import { CircleFlag } from 'https://esm.sh/@sankyu/react-circle-flags'


const EuropeFlag = () => (
  <CircleFlag countryCode="gb" cdnUrl="https://eu-cdn.example.com/circle-flags/flags/" />
)

Troubleshooting

Section titled “Troubleshooting”

Module Resolution Errors

Section titled “Module Resolution Errors”

Use import maps for React dependencies:

<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18",
      "react-dom/client": "https://esm.sh/react-dom@18/client",
      "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
    }
  }
</script>

TypeScript in Browser

Section titled “TypeScript in Browser”

esm.sh supports TypeScript transformation:

// .ts and .tsx files work automatically
import { CircleFlag } from 'https://esm.sh/@sankyu/react-circle-flags?target=es2020'

Import Maps Fallback

Section titled “Import Maps Fallback”

For browsers without import map support, use an esm shim:

<script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18"
    }
  }
</script>

Performance Tips

Section titled “Performance Tips”

Use HTTP/2

Modern CDNs support HTTP/2 for faster asset loading

Enable Compression

All CDNs serve Brotli/Gzip compressed assets automatically

Leverage Browser Cache

Versioned URLs enable long-term caching (1 year+)

Choose Right CDN

Use esm.sh for development, Skypack for production stability

Section titled “Related Resources”