@vx/Zoom

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

Installation

npm install --save @vx/zoom

Examples

Components

APIs

#<Zoom />

# Zoom.heightnumberrequired

Height of the zoom container.

# Zoom.widthnumberrequired

Width of the zoom container.

# Zoom.classNamestringoptional

className to apply to zoom div container.

Default undefined

# Zoom.constrain(transform: TransformMatrix, prevTransform: TransformMatrix) => TransformMatrixoptional

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;
}
# Zoom.passivebooleanoptional

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

# Zoom.scaleXMaxnumberoptional

Maximum x scale value for transform.

# Zoom.scaleXMinnumberoptional

Minimum x scale value for transform.

Default 0

# Zoom.scaleYMaxnumberoptional

Maximum y scale value for transform.

# Zoom.scaleYMinnumberoptional

Minimum y scale value for transform.

Default 0

# Zoom.styleCSSPropertiesoptional

style object to apply to zoom div container.

Default undefined

# Zoom.transformMatrixTransformMatrixoptional

Initial transform matrix to apply.

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

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