react-drag-n-zoom v3.0.1
react-drag-n-zoom
Drag and zoom your SVGs
What does it?
react-drag-n-zoom allows you to drag, zoom, expand, center your SVGs in the web.
Look at the amazing demo:
Install
npm install react-drag-n-zoom
or over yarn:
yarn add react-drag-n-zoom
How to Use
First import it:
import Viewer from 'react-drag-n-zoom'
Add the React Component for example in the render method (taken from ./example)
render () {
return (
<Viewer
ref={ref => (this.viewer = ref)} // (see below for methods)
zoomFullOnInit={true}
width="100"
height="100"
viewBox="0 0 100 100"
>
<circle
cx="50"
cy="50"
r="40"
stroke="black"
stroke-width="3"
fill="red"
/>
</Viewer>
)
}
Viewer accepts as children the content of SVGs. The SVG surrounding the circle Element above, will be added automatically by react-drag-n-zoom
Warning: Make sure width, height and viewBox are supplied to Viewer!
Methods
this.viewer.resetZoom()
- resets zoom and centers SVG at scale 1this.viewer.zoomIn(value = 1.2)
- zooms in SVGthis.viewer.zoomOut(value = 0.8)
- zoom out of SVGthis.viewer.zoomFull()
- expands SVG to fill screenthis.viewer.zoomTo(area)
- zoom to specific area area equals e.g. { top: 655, left: 570, width: 80, height: 50}
Features
- Extensive Functions
- Supports every SVG
- Uses Smooth Transitions
- Cross-Browser Compatibility - e.g. Firefox & Chrome differ in how they implement SVGs. That's why, react-drag-n-zoom will differ them too and apply the right methods for the specific browser.
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago