@visx/Zoom

@visx/zoom provides react components that make it easy to apply transforms to a viewport or chart.

Installation

npm install --save @visx/zoom

Examples

Based on Mike Bostock's Pan & Zoom III

Zoom

<Zoom />

APIs

#<Zoom />

# heightnumberrequired

Height of the zoom container.

# widthnumberrequired

Width of the zoom container.

# constrain(transform: TransformMatrix, prevTransform: TransformMatrix) => TransformMatrix

By default constrain() will only constrain scale values. To change constraints you can pass in your own constrain function as a prop.

For example, if you wanted to constrain your view to within [0, 0, width, height]:

function constrain(transformMatrix, prevTransformMatrix) {
   const min = applyMatrixToPoint(transformMatrix, { x: 0, y: 0 });
   const max = applyMatrixToPoint(transformMatrix, { x: width, y: height });
   if (max.x < width || max.y < height) {
     return prevTransformMatrix;
   }
   if (min.x > 0 || min.y > 0) {
     return prevTransformMatrix;
   }
   return transformMatrix;
}

# initialTransformMatrixTransformMatrix

Initial transform matrix to apply.

# pinchDeltaPinchDelta

  pinchDelta(state)

A function that returns { scaleX, scaleY, point } factors to scale the matrix by. Scale factors greater than 1 will increase (zoom in), less than 1 will decrease (zoom out), the point is used to find where to zoom. The state parameter is from react-use-gestures onPinch handler

# scaleXMaxnumber

Maximum x scale value for transform.

# scaleXMinnumber

Minimum x scale value for transform.

Default 0

# scaleYMaxnumber

Maximum y scale value for transform.

# scaleYMinnumber

Minimum y scale value for transform.

Default 0

# wheelDelta(event: WheelEvent | React.WheelEvent<Element>) => Pick<TransformMatrix, "scaleX" | "scaleY">

  wheelDelta(event)

A function that returns { scaleX,scaleY } factors to scale the matrix by. Scale factors greater than 1 will increase (zoom in), less than 1 will decrease (zoom out).

Exports

<Zoom />