@sasza/react-panzoom
v1.18.1
Published
React component for pan and zoom with possibility to moving, resizing and selecting elements inside
Downloads
2,173
Maintainers
Readme
@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>
)