useZoomPanContext

Returns the current { x, y, k, transformString } from the nearest ZoomPanProvider. This hook will only work inside a ZoomableGroup or ZoomPanProvider.

Usage

You can use this hook to keep the marker sizes and stroke widths constant as the map scales:

import { useZoomPanContext } from "react-simple-maps/zoom"
 
const ScaleAwareMarker = () => {
  const { k } = useZoomPanContext()
  return <circle r={4 / k} strokeWidth={1 / k} stroke="#FFF" fill="#F53" />
}

Dividing by k cancels out the group's scale, so the shape keeps its on-screen size at every zoom level. The same trick applies to font sizes and dash arrays.

Another use case would be to swap detail levels as the user zooms in:

const { k } = useZoomPanContext()
return k > 4 ? <DetailedLabels /> : null

Returns

x, y — translation in pixels
k — scale factor
transformString — the same values as an SVG transform attribute