react-drag-and-zoom
Why
If you need to make a component draggable and zoomable on scroll, this component is for you.
Usage
<DragAndZoom> <span>I can be zoomed and dragged</span></DragAndZoom>Install
yarn add react-drag-and-zoom # Or, if using npm npm install --save react-drag-and-zoomProps
zoomStep: number
This value is used to control zooming velocity. Default is 0.7.
initialZoom: number
Initial zoom percentage. Default is 100.
minZoom: number
Minimum zoom percentage that can be applied. Default is 0.
maxZoom: number
Maximum zoom percentage that can be applied. Default is Number.MAX_SAFE_INTEGER.
onZoom: func
Called while scrolling for zoom with the zoom value as it's first argument and the Event as the second.
onMouseDown: func
Called on mouse down with the Event as its only argument.
onDragStart: func
Called on drag start with the Event as its only argument.
onDrag: func
Called while dragging with the Event as its only argument.
onDragStop: func
Called when dragging stops with the Event as its only argument.
bounds: oneOf([shape({ left: number, top: number, right: number, bottom: number }), selector: string, 'parent'])
Specifies movement boundaries. Accepted values:
parentrestricts movement within the node's offsetParent (nearest node with position relative or absolute).- A selector, restricts movement within the targeted node
- An object with
left, top, right, and bottomproperties. These indicate how far in each direction the draggable can be moved.
About Citrusbyte
This software is lovingly maintained and funded by Citrusbyte. At Citrusbyte, we specialize in solving difficult computer science problems for startups and the enterprise.
At Citrusbyte we believe in and support open source software.
- Check out more of our open source software at Citrusbyte Labs.
- Learn more about our work.
- Hire us to work on your project.
- Want to join the team?
Citrusbyte and the Citrusbyte logo are trademarks or registered trademarks of Citrusbyte, LLC.
License
MIT © Citrusbyte, LLC