# @vx/Zoom

## Installation

    npm install --save @vx/zoom

## Components

- Zoom

## 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>

Default | Infinity

# Zoom.scaleXMin<number>

Default | 0

# Zoom.scaleYMax<number>

Default | Infinity

# Zoom.scaleYMin<number>

Default | 0

# 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).

Default | event => { return -event.deltaY > 0 ? { scaleX: 1.1, scaleY: 1.1 } : { scaleX: 0.9, scaleY: 0.9 }; }

# Zoom.width<number> `required`