# react-scalable-draggable

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

Latest version **1.0.1** (published 2026-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-scalable-draggable
pnpm add react-scalable-draggable
yarn add react-scalable-draggable
bun add react-scalable-draggable
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-08-19 |
| First published | 2018-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.20.2 |
| Dependencies | 0 |
| Unpacked size | 30.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | piro0919 |
| Maintainers | piro0919 |
| Keywords | react, draggable, drag, scale, transform, pointer-events |

## Links

- npm: https://www.npmjs.com/package/react-scalable-draggable
- Repository: https://github.com/piro0919/react-scalable-draggable
- Homepage: https://react-scalable-draggable.kkweb.io
- Issues: https://github.com/piro0919/react-scalable-draggable/issues
- Funding: https://github.com/sponsors/piro0919
- npm.io page: https://npm.io/package/react-scalable-draggable

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2026-08-19
- 1.0.0 — 2026-05-16
- 0.0.4 — 2019-01-29
- 0.0.3 — 2018-12-27
- 0.0.2 — 2018-12-26
- 0.0.1 — 2018-12-26

## README

# react-scalable-draggable

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

[![npm](https://img.shields.io/npm/v/react-scalable-draggable.svg)](https://www.npmjs.com/package/react-scalable-draggable)
[![license](https://img.shields.io/npm/l/react-scalable-draggable.svg)](./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

```bash
npm install react-scalable-draggable
```

Requires React 18 or 19.

## Usage

```tsx
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

---
_Source: https://npm.io/package/react-scalable-draggable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._