Country selectors are one of the most common UI components — shipping forms, user profiles, tax settings. Here's how to build a production-ready one with flags and search using ApogeoAPI.

What We're Building

A searchable dropdown that:

Shows a flag emoji + country name for each option

Filters as the user types

Returns the selected country's ISO code

Uses TypeScript throughout

Step 1: Get Your Free API Key

Sign up at app.apogeoapi.com — the free tier includes countries + states forever. No credit card needed.

Step 2: Fetch the Countries

// types.ts export interface Country { iso2 : string ; name : string ; flag_url : string ; region : string ; } // useCountries.ts import { useEffect , useState } from ' react ' ; export function useCountries () { const [ countries , setCountries ] = useState ([]); const [ loading , setLoading ] = useState ( true ); useEffect (() => { fetch ( ' https://api.apogeoapi.com/v1/countries ' , { headers : { ' X-API-Key ' : process . env . NEXT_PUBLIC_APOGEO_API_KEY ! } }) .…