Adding ability to control state from refs during onDrag

lib/Draggable.js

@@ -296,6 +296,8 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
 
     // Short-circuit if user's callback killed it.
     const shouldUpdate = this.props.onDrag(e, uiData);
+
+    if (shouldUpdate?.controlled) return;
     if (shouldUpdate === false) return false;
 
     this.setState(newState);

lib/DraggableCore.js

@@ -357,6 +357,9 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
 
     // Call event handler. If it returns explicit false, trigger end.
     const shouldUpdate = this.props.onDrag(e, coreEvent);
+
+    if (shouldUpdate?.controlled) return;
+
     if (shouldUpdate === false || this.mounted === false) {
       try {
         // $FlowIgnore

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-draggable",
+  "name": "react-draggable-motionbox",
   "version": "4.4.3",
   "description": "React draggable component",
   "main": "build/cjs/cjs.js",

typings/index.d.ts

@@ -1,66 +1,79 @@
-declare module 'react-draggable' {
-  import * as React from 'react';
+declare module "react-draggable-motionbox" {
+  import * as React from "react";
 
   export interface DraggableBounds {
-    left?: number
-    right?: number
-    top?: number
-    bottom?: number
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
   }
 
   export interface DraggableProps extends DraggableCoreProps {
-    axis: 'both' | 'x' | 'y' | 'none',
-    bounds: DraggableBounds | string | false ,
-    defaultClassName: string,
-    defaultClassNameDragging: string,
-    defaultClassNameDragged: string,
-    defaultPosition: ControlPosition,
-    positionOffset: PositionOffsetControlPosition,
-    position: ControlPosition
+    axis: "both" | "x" | "y" | "none";
+    bounds: DraggableBounds | string | false;
+    defaultClassName: string;
+    defaultClassNameDragging: string;
+    defaultClassNameDragged: string;
+    defaultPosition: ControlPosition;
+    positionOffset: PositionOffsetControlPosition;
+    position: ControlPosition;
   }
 
-  export type DraggableEvent = React.MouseEvent<HTMLElement | SVGElement>
+  export type DraggableEvent =
+    | React.MouseEvent<HTMLElement | SVGElement>
     | React.TouchEvent<HTMLElement | SVGElement>
     | MouseEvent
-    | TouchEvent
+    | TouchEvent;
 
   export type DraggableEventHandler = (
     e: DraggableEvent,
     data: DraggableData
   ) => void | false;
 
   export interface DraggableData {
-    node: HTMLElement,
-    x: number, y: number,
-    deltaX: number, deltaY: number,
-    lastX: number, lastY: number
+    node: HTMLElement;
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    lastX: number;
+    lastY: number;
   }
 
-  export type ControlPosition = {x: number, y: number};
+  export type ControlPosition = { x: number; y: number };
 
-  export type PositionOffsetControlPosition = {x: number|string, y: number|string};
+  export type PositionOffsetControlPosition = {
+    x: number | string;
+    y: number | string;
+  };
 
   export interface DraggableCoreProps {
-    allowAnyClick: boolean,
-    cancel: string,
-    disabled: boolean,
-    enableUserSelectHack: boolean,
-    offsetParent: HTMLElement,
-    grid: [number, number],
-    handle: string,
-    nodeRef?: React.RefObject<HTMLElement>,
-    onStart: DraggableEventHandler,
-    onDrag: DraggableEventHandler,
-    onStop: DraggableEventHandler,
-    onMouseDown: (e: MouseEvent) => void,
-    scale: number
+    allowAnyClick: boolean;
+    cancel: string;
+    disabled: boolean;
+    enableUserSelectHack: boolean;
+    offsetParent: HTMLElement;
+    grid: [number, number];
+    handle: string;
+    nodeRef?: React.RefObject<HTMLElement>;
+    onStart: DraggableEventHandler;
+    onDrag: DraggableEventHandler;
+    onStop: DraggableEventHandler;
+    onMouseDown: (e: MouseEvent) => void;
+    scale: number;
   }
 
-  export default class Draggable extends React.Component<Partial<DraggableProps>, {}> {
-    static defaultProps : DraggableProps;
+  export default class Draggable extends React.Component<
+    Partial<DraggableProps>,
+    {}
+  > {
+    static defaultProps: DraggableProps;
   }
 
-  export class DraggableCore extends React.Component<Partial<DraggableCoreProps>, {}> {
-    static defaultProps : DraggableCoreProps;
+  export class DraggableCore extends React.Component<
+    Partial<DraggableCoreProps>,
+    {}
+  > {
+    static defaultProps: DraggableCoreProps;
   }
 }