useGeographies
The useGeographies hook is used internally by react-simple-maps to generate the geographies returned by the Geographies component. By using this hook, you can create your won Geographies component with custom capabilities.
import { useGeographies, Geography } from "react-simple-maps"
const geoUrl = "/custom-topojson-file.json"
export default function CustomGeographies() {
const { geographies, outline, borders } = useGeographies({
geography: geoUrl,
parseGeographies: (geos) => geos,
})
return (
<g>
{geographies.map((geo) => {
return <Geography key={geo.rsmKey} geography={geo} />
})}
</g>
)
}
jsx
The useGeographies hook takes the same options as the Geographies component (geography, parseGeographies).
If you want to fully control the entire geography rendering process, you can omit the Geography component and render out the geographies manually:
import { useGeographies } from "react-simple-maps"
const geoUrl = "/custom-topojson-file.json"
export default function CustomGeographies() {
const { geographies, outline, borders } = useGeographies({
geography: geoUrl,
parseGeographies: (geos) => geos,
})
return (
<g>
{geographies.map((geo) => {
return <path key={geo.rsmKey} d={geo.svgPath} />
})}
</g>
)
}
jsx
Note that if you choose to not use the Geography component, you will have to implement all the hover, focus, and active logic yourself.
useGeographies options
| Name | Type | Default |
|---|---|---|
| geography | String | Object | Array | |
| parseGeographies | Function |
