Movable

import Movable from "@arclockproject/common/components/Movable";

For examples and live demos, see the Movable guide.

Movable

Component · default export

A <div> whose content can be dragged (mouse or one finger) and zoomed (mouse wheel or pinch). It fills its parent by default and hides overflow.

Accepts all <div> props. Your onMouseDown and onTouchStart run before the drag logic, even when dragging is off. Turning a feature off resets its position or zoom.

Props

enableMovement? (boolean, default false) — Allow dragging the content.
enableZoom? (boolean, default false) — Allow zooming

Also accepts all props of Omit<ComponentProps<"div">, "ref">.

Example

<Movable enableMovement enableZoom style={{ height: 300 }}>
  <img src="/map.png" />
</Movable>

Movable​

Movable