ZoomPanProvider

Provides the zoom/pan context that useZoomPanContext reads. ZoomableGroup renders it for you; use it directly only when you build your own zoom behaviour on top of useZoomPan and still want child components to read the current transform.

Usage

import { ZoomPanProvider, useZoomPan } from "react-simple-maps/zoom"
 
const CustomZoom = ({ children }) => {
  const { mapRef, position, transformString } = useZoomPan({ zoom: 1 })
 
  return (
    <ZoomPanProvider
      value={{ x: position.x, y: position.y, k: position.k, transformString }}
    >
      <g ref={mapRef}>
        <g transform={transformString}>{children}</g>
      </g>
    </ZoomPanProvider>
  )
}

Props

value

The current transform: { x, y, k, transformString }.

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

Defaults to the identity transform, { x: 0, y: 0, k: 1, transformString: "translate(0 0) scale(1)" }. Build the object with useMemo if the subtree is large — a fresh object identity re-renders every consumer.

children

The subtree that can read the zoom/pan context.