# Country facts

Drop-in country UI from `@rahhal/countries/react`: `CountryFlag`, `CountryCard`, `CountryFacts`, `CountryDetail`. Data-in or self-fetching (by `name`/`code`), label-injected for i18n, and composed from `@rahhal/ui`. Backed by a REST Countries v4 client with an automatic v3.1 fallback.

[View examples](https://marsam.rahhal.app/components/countries) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/countries/react`

**Category:** `data`

## Components

| component | purpose |
| --- | --- |
| CountryFlag | emoji or SVG flag, with a cca2-derived fallback |
| CountryCard | compact tile — flag · name · region · capital · population |
| CountryFacts | labelled definition list of the key facts |
| CountryDetail | full view — header + facts + neighbours + footer slot |

## Common props

| prop | type | purpose |
| --- | --- | --- |
| country | Country | null | data-in mode |
| name / code | string | self-fetching mode (by name or ISO code) |
| labels | CountryLabels | localized field labels (English defaults applied) |
| renderNeighborLink | (cca3) => ReactNode | CountryDetail — app-routed neighbour links |
| footer | ReactNode | CountryDetail — app-owned extras (map, buttons) |

## Data layer (`@rahhal/countries`)

| export | purpose |
| --- | --- |
| getAllCountries() | light grid projection of every country |
| getCountryByName / Code | full detail for one country |
| getCountriesByRegion / Currency / Language | scoped lists |
| formatPopulation / formatArea / formatDensity | display formatters |