npm.io
1.0.1 • Published 4 weeks ago

react-scalable-draggable

Licence
MIT
Version
1.0.1
Deps
0
Size
30 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

react-scalable-draggable

Draggable React component that respects CSS-transformed (scaled) parent containers.

npm license

A small, dependency-free draggable using native Pointer Events. The parentScale prop lets the box stay under the cursor when its ancestor uses transform: scale(...) — the case classic draggables get wrong.

Demo: https://react-scalable-draggable.kkweb.io

Install

npm install react-scalable-draggable

Requires React 18 or 19.

Usage

import { useRef } from "react";
import { ScalableDraggable } from "react-scalable-draggable";

export function App() {
  const stageRef = useRef<HTMLDivElement | null>(null);
  return (
    <div ref={stageRef} style={{ transform: "scale(0.6)", position: "relative" }}>
      <ScalableDraggable parentScale={0.6} parentRef={stageRef}>
        <div>drag me</div>
      </ScalableDraggable>
    </div>
  );
}

API

Prop Type Default Description
children ReactNode — Drag target content.
parentScale number 1 Scale factor of an ancestor with transform: scale(...).
parentRef RefObject<HTMLElement> — If set, constrains the box within the parent rect.
initialPosition { x: number; y: number } { x: 0, y: 0 } Initial position.
disabled boolean false Disable interaction.
className string — Class for the draggable root.
style CSSProperties — Inline style merged into the root.
onDragStart (e, position) => void — Fires on pointer down.
onDrag (e, { position, delta }) => void — Fires on every move.
onDragEnd (e, position) => void — Fires on pointer up.

Root exposes data-scalable-draggable, data-dragging, data-disabled attributes.

License

MIT

Keywords

reactdraggabledragscaletransformpointer-events