@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

APIs

#<Zoom />

# heightnumberrequired

Height of the zoom container.

# widthnumberrequired

Width of the zoom container.

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

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 | undefined

Initial transform matrix to apply.

# pinchDeltaPinchDelta | undefined
  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 | undefined

Maximum x scale value for transform.

# scaleXMinnumber | undefined

Minimum x scale value for transform.

Default 0

# scaleYMaxnumber | undefined

Maximum y scale value for transform.

# scaleYMinnumber | undefined

Minimum y scale value for transform.

Default 0

# wheelDelta((event: WheelEvent | React.WheelEvent<Element>) => Pick<TransformMatrix, "scaleX" | "scaleY">) | undefined
  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