@vx/Zoom

Installation

npm install --save @vx/zoom

Components

API

<Zoom />

# Zoom.children<func> required

# 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.scaleXMax<number>
DefaultInfinity

# Zoom.scaleXMin<number>
Default0

# Zoom.scaleYMax<number>
DefaultInfinity

# Zoom.scaleYMin<number>
Default0

# 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