component 08 / 28WORKING
SC Country Name & Flag List
- type
- Code Component
- platform
- Framer
- last update
- license
- SecretoCho Design
needs JavaScript
demo · runs with JavaScript
Show any country flag and name with responsive layout, typography, and alignment options.
A flexible component for rendering country flags (via ISO 3166-1 alpha-2 codes) with optional names or codes. Supports both dropdown selection and direct text input for seamless integration with static designs and CMS data pipelines.
- UI
- Metadata
- Internationalization
Main
Overview
- Built With
- React, CSS (inline styles), Framer Code Component API
- Layout Support
- Responsive with min-width guardrails
- Orientation
- Horizontal (flag + label, configurable side)
- Ideal Use Case
- Profile cards, checkout flows, location selectors
Tags
Code comment
/** * SC Country Name & Flag List * © SecretoCho Design 2025 (https://secretocho.design) * Render ISO 3166-1 alpha-2 flags with names or codes. * Selection via dropdown (List) or text input (Write). */Dependencies
- Technologies
- None (flags served via flagcdn.com)
- Notes
- No external libraries; pure React + CSS.
Complexity
- Logic Level
- Medium (string parsing, ISO mapping, conditional rendering)
- Runtime Cost
- Low (static list, single image load)
- Component Size
- ~24 KB (due to bundled country list)
- Notes
- Ensure stable internet to fetch flags (CDN).
Guide
Instructions
- Add to your Framer project and place on the canvas.
- Choose Select → List (dropdown) or Select → Write (string input).
- Configure Country (if List) or Search (if Write).
- Adjust typography, alignment, spacing, and radius.
- Use label toggles to display name, code, or hide entirely.
Examples / Presets
Preset A
List → TR, Name → “Turkey”, Right position, Flag 24×18, Radius 4px
Preset B
Write → "JP", Display → Code, Alignment → Center
Preset C
List → US, Name hidden, Flag 40×30, Alignment → Right
Mechanics
How it Works
- Internal countryList holds { code, name } pairs (ISO 3166-1).
- List Mode: Direct lookup by enum prop.
- Write Mode: Lowercased input string matched against name/code.
- Flag image loaded from https://flagcdn.com/w40/{code}.png.
- Flexbox handles alignment, spacing, and label placement.
Performance & Tuning
- Images are small (~2–4 KB each).
- Prefer “List” mode for controlled designs.
- “Write” mode sensitive to exact matches (avoid typos).
Compatibility & Limits
- Works in all modern browsers.
- Dependent on CDN availability for flags.
- No offline fallback; requires network.
Quality
Accessibility
- Flags are <img> with alt text = "Country flag".
- Labels inherit provided font and color for legibility.
- Supports baseline offset for vertical optical alignment.
Security & Privacy
- No network calls except image fetch from trusted CDN.
- No data storage, eval, or innerHTML usage.
- No device permissions required.
Reference
Props
| name | type | default | description |
|---|---|---|---|
selectMode | enum(“List”|“Write”) | “List” | Selection method. |
country | enum(ISO alpha-2) | “TR” | Country code (when List). |
search | string | - | Exact country name or code (when Write). |
showName | boolean | true | Toggle label visibility. |
nameFormat | enum(“name”|“code”) | “name” | Display country name or ISO code. |
namePosition | enum(“left”|“right”) | “right” | Label placement. |
fontType | font | - | Typography settings for label. |
textColor | color | ”#000” | Label text color. |
nameOffset | number(px) | 0 | Vertical shift for label. |
spacing | number(px) | 8 | Gap between flag and label. |
alignment | enum(“left”|“center”|“right”) | “left” | Horizontal alignment. |
FlagWidth | number(px) | 24 | Flag image width. |
FlagHeight | number(px) | 18 | Flag image height. |
flagRadius | number(px) | 4 | Rounded corners for flag. |
Notes & Tips
- Use Write mode for CMS pipelines (dynamic data).
- “List” mode guarantees valid ISO selection.
- Radius > 8px gives a “badge” look.
Troubleshooting / FAQ
Flag not showing
Check code is valid ISO alpha-2.
Name not aligned
Adjust nameOffset.
Image blurry
Increase FlagWidth/FlagHeight.
Source
Header comment
/** * SC Country Name & Flag List * © SecretoCho Design 2025 (https://secretocho.design) * Render ISO 3166-1 alpha-2 flags with names or codes. * Selection via dropdown (List) or text input (Write). */Key excerpt
One flag image URL per ISO code, and two ways to pick a country: a code from the list, or typed text matched against names and codes.
function getFlagImageUrl(code: string) { return `https://flagcdn.com/w40/${code.toLowerCase()}.png`}/** * @framerDisableUnlink * @framerSupportedLayoutWidth any * @framerSupportedLayoutHeight any */export function SCCountryFlagList(props) { const { selectMode, country, search, alignment, FlagHeight, FlagWidth, fontType, textColor, nameOffset, spacing, showName, namePosition, nameFormat, flagRadius, } = props let selected = { name: "Turkey", code: "TR" } if (selectMode === "List") { selected = countryList.find((c) => c.code === country) || selected } else if (selectMode === "Write" && search) { const input = search.trim().toLowerCase() selected = countryList.find( (c) => c.name.toLowerCase() === input || c.code.toLowerCase() === input ) || selected }Credits
Credits
- Country data: ISO 3166-1 alpha-2.
- Implementation & Framer adaptation by SecretoCho Design.
- inspired by
- SecretoCho Design
- license
- SecretoCho Design
SecretoCho Design 2025
Disclaimer
Provided “as is” for visual/UX purposes. Validate performance, accessibility, and licensing for your project.
Proves
Hiring a design engineer?
I’m open to senior design engineer roles: remote from Belgrade, or relocation with visa sponsorship. Write to me, or read the CV first. Client work stays selective, one project at a time.
sc@secretocho.design