@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.

# classNamestring | undefined

className to apply to zoom div container.

Default undefined

# 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;
}
# passiveboolean | undefined

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

# 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

# styleCSSProperties | undefined

style object to apply to zoom div container.

Default undefined

# transformMatrixTransformMatrix | undefined

Initial transform matrix to apply.

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

# wheelDelta((event: React.WheelEvent<Element> | WheelEvent) => 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 descrease (zoom out).

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

Exports