react-country-map

A responsive, accessible, highlight-only SVG world map for React 18/19 and Next.js.

npm install react-country-map

import { WorldMap } from "react-country-map";
import "react-country-map/styles.css";

<WorldMap
  data={[
    { country: "Pakistan", value: 120 },
    { country: "Germany", value: 340 },
  ]}
/>;

Country resolution accepts common/official names, ISO-2, ISO-3, and frequent aliases. Only supplied countries are highlighted. Explicit colors override the automatic value scale. Tooltips work with pointer, keyboard, and touch input and can be replaced globally with renderTooltip or per datum with tooltip.

The entry is marked "use client" for Next.js App Router. Serializable map props can be rendered from a Server Component; callbacks and tooltip functions belong in a consumer Client Component.

The default map is pre-generated from [email protected] / Natural Earth 4.1.0 at 110m resolution and performs no geographic-data request at runtime. Natural Earth is public domain and world-atlas is ISC licensed. See the bundled NOTICE for boundary policy and identifiers. Custom TopoJSON can be supplied through mapData.

For the complete API, theming, Next.js guide, examples, and verification workflow, see the repository README.

MIT licensed.