← All @molecule/* packages · App templates
@molecule/app-country-flagsCore interface · country-flags · App (browser) · v1.0.1 · Apache-2.0
Country/region flag interfaces and provider system
npm install @molecule/app-country-flags@molecule/app-country-flags is the country-flags core interface on the app (browser) side: the API your app calls, with no vendor inside.
Choose the implementation by bonding one of its 1 provider: @molecule/app-country-flags-country-flag-icons.
import { getCountryFlag, setCountryFlags } from '@molecule/app-country-flags'
import { countryFlags } from '@molecule/app-country-flags-country-flag-icons'
setCountryFlags(countryFlags) // once, at app startup
const flag = getCountryFlag('us')
if (flag) {
// flag.svg is complete rectangular SVG markup (viewBox-only sizing);
// flag.aspectRatio (width / height) sizes the rendered element.
}Providers (1): @molecule/app-country-flags-country-flag-icons
Works with: @molecule/app-bond
Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit
src/index.tsJSDoc, not this file.
Framework-agnostic country/region flag interfaces for molecule.dev.
Flag bond packages (e.g. @molecule/app-country-flags-country-flag-icons)
export a CountryFlagSet object which is bonded via {@link setCountryFlags}
at application startup. Application code retrieves flags via
{@link getCountryFlag}.
import { getCountryFlag, setCountryFlags } from '@molecule/app-country-flags'
import { countryFlags } from '@molecule/app-country-flags-country-flag-icons'
setCountryFlags(countryFlags) // once, at app startup
const flag = getCountryFlag('us')
if (flag) {
// flag.svg is complete rectangular SVG markup (viewBox-only sizing);
// flag.aspectRatio (width / height) sizes the rendered element.
}
core
npm install @molecule/app-country-flags @molecule/app-bond
CountryFlagDataA single country/region flag as framework-agnostic SVG markup.
interface CountryFlagData {
/**
* Complete rectangular SVG markup with viewBox-only sizing — consumers set
* the rendered width/height (e.g. by injecting attributes or via a sized
* wrapper element).
*/
svg: string
/** Width divided by height, e.g. `1.5` for a 3:2 rectangle. */
aspectRatio: number
}
CountryFlagSetFlags keyed by UPPERCASE ISO 3166-1 alpha-2 code ('US', 'CN'), including
the pseudo-codes flag libraries commonly ship (e.g. 'EU').
type CountryFlagSet = Record<string, CountryFlagData>
getCountryFlag(code)Retrieves a single flag by country/region code from the bonded flag set.
Deliberately non-throwing (unlike @molecule/app-icons' getIcon()): flags
are decorative, so a missing flag — unbonded set or unknown code — returns
undefined and the consumer renders its textual fallback (e.g. the code).
function getCountryFlag(code: string): CountryFlagData | undefined
code — ISO 3166-1 alpha-2 code (case-insensitive), e.g. 'us'.Returns: The flag data, or undefined when no set is bonded or the code is not in the bonded set.
hasCountryFlags()Checks whether a flag set is currently bonded.
function hasCountryFlags(): boolean
Returns: true if a flag set is bonded.
setCountryFlags(flagSet)Registers a flag set as the active singleton. Called at application startup to wire a flag library.
function setCountryFlags(flagSet: CountryFlagSet): void
flagSet — The flag set (a record of UPPERCASE codes to flag data).| Provider | Package |
|---|---|
| country-flag-icons | @molecule/app-country-flags-country-flag-icons |
Peer dependencies:
@molecule/app-bond ^1.0.1@molecule/app-bond
getCountryFlag() never throws — flags are decorative, so an unbonded
set or unknown code returns undefined. Always render a textual fallback
(typically the code itself) for the undefined case instead of assuming a
flag exists.
Codes are ISO 3166-1 alpha-2 and case-insensitive on lookup; sets are
keyed UPPERCASE. Pseudo-codes flag libraries ship (e.g. 'EU') are valid
set keys too.
The SVG markup intentionally has no width/height attributes — inject them
(or size a wrapper) at render time using aspectRatio.