useZoomPanContext

The useZoomPanContext hook provides a quick way to access the transform properties applied to the ZoomableGroup component.

import {
  ComposableMap,
  ZoomableGroup,
  useZoomPanContext,
} from "react-simple-maps"

const CustomComponent = () => {
  const ctx = useZoomPanContext()

  // ctx.x
  // ctx.y
  // ctx.k
  // ctx.transformString

  return <circle cx={0} cy={0} r={10} />
}

const ExampleMap = () => {
  return (
    <ComposableMap>
      <ZoomableGroup>
        <CustomComponent />
      </ZoomableGroup>
    </ComposableMap>
  )
}

Returned values

The useZoomPanContext hook returns the following values:

x

The x value is the x-offset applied to ZoomableGroup.

y

The y value is the y-offset applied to ZoomableGroup.

k

The k value is the scale applied to ZoomableGroup. This value will usually correspond to the zoom-level applied to the map.

transformString

This string value is the value passed to the transform property of the ZoomableGroup component.