@vx/Zoom
Installation
npm install --save @vx/zoom
Components
API
<Zoom />
# Zoom.children<func> required
# Zoom.className<string>
Default | undefined |
# 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 When passive is # Zoom.scaleXMax<number> # Zoom.scaleXMin<number> # Zoom.scaleYMax<number> # Zoom.scaleYMin<number> # Zoom.style<object> # Zoom.transformMatrix<shape[object Object]> # Zoom.wheelDelta<func> 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). # Zoom.width<number> false
. This will wrap handleWheel()
will call event.preventDefault()
before other
execution. This prevents an outer parent from scrolling when the mouse wheel is used to zoom.
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 Default Infinity Default 0 Default Infinity Default 0 Default undefined Default {
scaleX: 1,
scaleY: 1,
translateX: 0,
translateY: 0,
skewX: 0,
skewY: 0
} wheelDelta(event.deltaY)
Default event => {
return -event.deltaY > 0 ? { scaleX: 1.1, scaleY: 1.1 } : { scaleX: 0.9, scaleY: 0.9 };
} required