useGeographies

useGeographies is the data loading hook powering Geographies. You can use this hook to create your own Geographies component without render props.

Usage

import { useGeographies } from "react-simple-maps"
 
const Countries = () => {
  const { geographies } = useGeographies({ geography: geoUrl })
  return geographies.map((geo) => <path key={geo.rsmKey} d={geo.svgPath} />)
}

Since useGeographies requires a projection to compoute the SVG paths for the individual geographies, it has to be called inside a MapProvider.

Parameters

An object with:

• geography — a URL string, TopoJSON Topology, GeoJSON FeatureCollection, or an array of features. This prop is compared by content, so a fresh literal on each render is safe.
• parseGeographies — optional function to filter, sort or augment the raw features before paths are computed. Its identity is a dependency; define it outside the component or wrap it in useCallback.

Returns

• geographies — features extended with rsmKey and svgPath. An empty array until the data resolves.
• outline — outer boundary mesh, or undefined. The outline can only be computed if the input is valid TopoJSON.
• borders — shared internal borders mesh, or undefined. The borders can only be computed if the input is valid TopoJSON.