@sasza/react-panzoom v1.16.0
@sasza/react-panzoom
React component for pan and zoom with possibility to moving, resizing and selecting elements inside based on panzoom-core.
Demo
https://codesandbox.io/s/goofy-rgb-48tbu https://codesandbox.io/s/bold-pond-v0kvx7 (map with background image) https://codesandbox.io/s/loving-lederberg-r75ufe (example from above) Library react-drawing
Installation
npm install @sasza/react-panzoom
Properties
Name | Default | Description | |
---|---|---|---|
boundary | { top, right, bottom left, parent } \| bool | false | top, right, bottom, left - numbers in px.can be used as expression like: { top: 'childHeight - containerHeight - 100px' } |
children * | node | ||
disabledUserSelect | bool | false | prevent css select as text etc |
disabled | bool | false | disabling pan and zoom |
disabledElements | bool | false | disabling moving elements |
disabledMove | bool | false | disabling move |
disabledZoom | bool | false | disabling zoom |
height | string/number | 100% | height of child container |
onContainerChange | func | null | event on move/zoom |
onContainerClick | func | null | event on mousedown/touchdown |
onContainerPositionChange | func | null | event on position change |
onContainerZoomChange | func | null | event on zoom change |
onElementsChange | func | null | callback invoked when elements change position |
selecting | bool | false | switches to selecting mode, see selecting |
width | string/number | 100% | width of child container |
zoomInitial | number | 1 | initial zoom value |
zoomMax | number | 5 | maximum zoom |
zoomMin | number | 0.3 | minimum zoom |
zoomSpeed | number | 1 | zoom speed on wheel event |
* - is required
API
const panZoomRef = useRef<PanZoomAPI>();
// ...
return (
<PanZoom ref={panZoomRef}>
...
</PanZoom>
)
panZoomRef.current contains methods like:
Function | Description |
---|---|
move(x:number, y:number) | Add x and y in px to current offset. Returns current position {x, y} |
getElements() | Returns map of elements |
getPosition() | Returns current position {x, y} |
setPosition(x:number, y:number) | Set offset position of pan |
getZoom():number | Returns current zoom |
setZoom(zoom:number) | Sets zoom |
zoomIn(zoom:number) | Add to current zoom, could be also negative number (it will work like zoomOut) |
zoomOut(zoom:number) | Sub from current zoom |
childNode | Returns node element |
reset() | Reset to (0, 0, 0) |
Elements
import PanZoom, { Element } from '@sasza/react-panzoom'
// ...
<div style={{ width: 300, height: 300 }}>
<PanZoom>
<Element id="orange" x={50} y={60}>
<Circle />
</Element>
<Element id="red" x={120} y={150}>
<Square />
</Element>
</PanZoom>
</div>
Element properties
Name | Default | Description | |
---|---|---|---|
id * | string/id | undefined | Unique ID of element |
children * | node | ||
className | string | undefined | Class name for element |
disabled | bool | false | Disabling element |
draggableSelector | string | undefined | Selector for dragging element |
family | string | undefined | Name of element's family, all of elements are connected during moving |
followers | Array\<string/id> | [] | Similar to family, but for specified ids of elements |
onAfterResize | func | null | Event after resizing element |
onClick | func | null | Event on clicking at element |
onMouseUp | func | null | Event on mouse up after clicking at element |
resizable | bool | false | Is element resizable |
resizedMaxWidth | number | undefined | Maximum width of resized element |
resizedMinWidth | number | 15 | Minimum width of resized element |
resizerWidth | number | 15 | Width of resizer element |
x | number | 0 | x position of element |
y | number | 0 | y position of element |
Selecting
import PanZoom, { Element } from '@sasza/react-panzoom'
// ...
<div style={{ width: 300, height: 300 }}>
<PanZoom selecting>
<Element id="orange" x={50} y={60}>
<Circle />
</Element>
<Element id="red" x={120} y={150}>
<Square />
</Element>
<Element id="green" x={200} y={50}>
<SquareRounded />
</Element>
</PanZoom>
</div>
Testing
npm run test
Examples
npm run storybook
Usage
import PanZoom from "@sasza/react-panzoom";
const App = () => (
<PanZoom>
Lorem ipsum dolor
</PanZoom>
)
import { PanZoomWithCover } from "@sasza/react-panzoom";
const App = () => (
<PanZoomWithCover cover="url_to_image">
Lorem ipsum dolor
</PanZoomWithCover>
)
23 days ago
1 month ago
1 month ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
6 months ago
6 months ago
9 months ago
10 months ago
8 months ago
8 months ago
10 months ago
12 months ago
12 months ago
12 months ago
10 months ago
10 months ago
10 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago