Viewer
Features
This component works with three different mode selected through an attribute:
- With the tool pan the user can move the image dragging it inside the viewer
- With the tool zoom the user can scale the image through a point click or zoom a specified area
- With the tool none the user can interact with the SVG content and trigger browser events
Additional Features
- Detect zoom performed through pinch and scroll (optional)
- Perform autopan when the mouse is close to the edge of the viewer (optional)
- Each callback function receives (x,y) coords mapped to the real SVG size
- Fully stateless
- Event info managed with lazy mode to ensure high performance
- ES6 syntax
Props
width
– required – width of the viewer displayed on screen (if you want to omit this below)height
– required – height of the viewer displayed on screen (if you want to omit this below)background
– background of the viewer (default dark grey)style
- CSS style of the viewerspecialKeys
- array of keys that in zoom mode switch zoom in and zoom out (default Win/Cmd, Ctrl)detectPinch
- detect zoom operation performed trough pinch gesture or mouse scrolldetectAutoPan
- perform PAN if the mouse is on viewer borderSVGBackground
- background of the SVG (default white)value
- value of the viewer (current point of view)tool
- active tool ( one ofnone
,pan
,zoom
,zoom-in
,zoom-out
)onChange
- handler something changedfn(viewerEvent)
onClick
- handler clickfn(viewerEvent)
onMouseUp
- handler mouseupfn(viewerEvent)
onMouseMove
- handler mousemovefn(viewerEvent)
onMouseDown
- handler mousedownfn(viewerEvent)
ViewerEvent
SyntheticEvent originalEvent
- The original React eventobject
- coordinate {x,y} of the event mapped to SVG coordinatesnumber x
- x coordinate of the event mapped to SVG coordinatesnumber y
- y coordinate of the event mapped to SVG coordinatesnumber scaleFactor
- zoom levelnumber translationX
- x delta from the viewer originnumber translationY
- y delta from the viewer origin
Usage
See here a demo codenpm install --save react-svg-pan-zoom
Autosize
React SVG Pan Zoom requires width
and height
to works properly. If
you need an autosized component you can get the dimensions of a wrapper element and pass them as properties to
the child element through ReactDimension.