@vx/Zoom

Installation

npm install --save @vx/zoom

Components

API

<Zoom />

# Zoom.children<func> required

# Zoom.className<string>
Defaultundefined

# Zoom.constrain<func>

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

@param {matrix} transformMatrix @param {matrix} prevTransformMatrix @returns {martix}

# Zoom.height<number> required

# Zoom.passive<bool>

By default passive is false. This will wrap children in a

and add an active wheel event listener (handleWheel). handleWheel() will call event.preventDefault() before other execution. This prevents 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} />.
Defaultfalse

# Zoom.scaleXMax<number>
DefaultInfinity

# Zoom.scaleXMin<number>
Default0

# Zoom.scaleYMax<number>
DefaultInfinity

# Zoom.scaleYMin<number>
Default0

# Zoom.style<object>
Defaultundefined

# Zoom.transformMatrix<shape[object Object]>
Default{ scaleX: 1, scaleY: 1, translateX: 0, translateY: 0, skewX: 0, skewY: 0 }

# Zoom.wheelDelta<func>

 wheelDelta(event.deltaY)

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).
Defaultevent => { return -event.deltaY > 0 ? { scaleX: 1.1, scaleY: 1.1 } : { scaleX: 0.9, scaleY: 0.9 }; }

# Zoom.width<number> required