@vx/Zoom

Height of the zoom container.

Width of the zoom container.

className to apply to zoom div container.

Default 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;
}

When false (default), <Zoom> children are wrapped in a <div> with an active wheel event listener (handleWheel). handleWheel() will call event.preventDefault() before other execution to prevent an outer parent from scrolling when the mouse wheel is used to zoom.

When passive is true it is required to add <MyComponent onWheel={zoom.handleWheel} /> to handle wheel events. Note: By default you do not need to add <MyComponent onWheel={zoom.handleWheel} />. This is only necessary when <Zoom passive={true} />.

Default false

Maximum x scale value for transform.

Minimum x scale value for transform.

Default 0

Maximum y scale value for transform.

Minimum y scale value for transform.

Default 0

style object to apply to zoom div container.

Default undefined

Initial transform matrix to apply.

Default { scaleX: 1, scaleY: 1, translateX: 0, translateY: 0, skewX: 0, skewY: 0, }

  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 descrease (zoom out).

Default (event: React.WheelEvent | WheelEvent) => -event.deltaY > 0 ? { scaleX: 1.1, scaleY: 1.1 } : { scaleX: 0.9, scaleY: 0.9 }