feat(React): add nodeRef prop (#478)

If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
Unfortunately, in order for <Draggable> to work properly, we need raw access
to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
as in this example:

function MyComponent() {
  const nodeRef = React.useRef(null);
  return (
    <Draggable nodeRef={nodeRef}>
      <div ref={nodeRef}>Example Target</div>
    </Draggable>
  );
}

This can be used for arbitrarily nested components, so long as the ref ends up
pointing to the actual child DOM node and not a custom component.

Thanks to react-transition-group for the inspiration.
`nodeRef` is also available on <DraggableCore>.

Author: STRML

README.md

@@ -224,6 +224,28 @@ onDrag: DraggableEventHandler,
 // Called when dragging stops.
 onStop: DraggableEventHandler,
 
+// If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
+// Unfortunately, in order for <Draggable> to work properly, we need raw access
+// to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
+// as in this example:
+//
+// function MyComponent() {
+//   const nodeRef = React.useRef(null);
+//   return (
+//     <Draggable nodeRef={nodeRef}>
+//       <div ref={nodeRef}>Example Target</div>
+//     </Draggable>
+//   );
+// }
+//
+// This can be used for arbitrarily nested components, so long as the ref ends up
+// pointing to the actual child DOM node and not a custom component.
+//
+// Thanks to react-transition-group for the inspiration.
+//
+// `nodeRef` is also available on <DraggableCore>.
+nodeRef: React.Ref<typeof React.Component>,
+
 // Much like React form elements, if this property is present, the item
 // becomes 'controlled' and is not responsive to user input. Use `position`
 // if you need to have direct control of the element.

lib/Draggable.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -29,6 +29,7 @@ export type DraggableProps = {
   defaultClassNameDragging: string,
   defaultClassNameDragged: string,
   defaultPosition: ControlPosition,
+  nodeRef?: ?React.ElementRef<any>,
   positionOffset: PositionOffsetControlPosition,
   position: ControlPosition,
   scale: number
@@ -226,7 +227,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
 
   componentDidMount() {
     // Check to see if the element passed is an instanceof SVGElement
-    if(typeof window.SVGElement !== 'undefined' && ReactDOM.findDOMNode(this) instanceof window.SVGElement) {
+    if(typeof window.SVGElement !== 'undefined' && this.findDOMNode() instanceof window.SVGElement) {
       this.setState({isElementSVG: true});
     }
   }
@@ -235,6 +236,12 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
     this.setState({dragging: false}); // prevents invariant if unmounted while dragging
   }
 
+  // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+  // the underlying DOM node ourselves. See the README for more information.
+  findDOMNode(): ?HTMLElement {
+    return this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
+  }
+
   onDragStart: DraggableEventHandler = (e, coreData) => {
     log('Draggable: onDragStart: %j', coreData);
 

lib/DraggableCore.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import {matchesSelectorAndParentsTo, addEvent, removeEvent, addUserSelectStyles, getTouchIdentifier,
@@ -56,6 +56,7 @@ export type DraggableCoreProps = {
   offsetParent: HTMLElement,
   grid: [number, number],
   handle: string,
+  nodeRef?: ?React.ElementRef<any>,
   onStart: DraggableEventHandler,
   onDrag: DraggableEventHandler,
   onStop: DraggableEventHandler,
@@ -155,6 +156,25 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
      */
     cancel: PropTypes.string,
 
+    /* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
+     * Unfortunately, in order for <Draggable> to work properly, we need raw access
+     * to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
+     * as in this example:
+     *
+     * function MyComponent() {
+     *   const nodeRef = React.useRef(null);
+     *   return (
+     *     <Draggable nodeRef={nodeRef}>
+     *       <div ref={nodeRef}>Example Target</div>
+     *     </Draggable>
+     *   );
+     * }
+     *
+     * This can be used for arbitrarily nested components, so long as the ref ends up
+     * pointing to the actual child DOM node and not a custom component.
+     */
+    nodeRef: PropTypes.object,
+
     /**
      * Called when dragging starts.
      * If this function returns the boolean false, dragging will be canceled.
@@ -221,7 +241,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     this.mounted = true;
     // Touch handlers must be added with {passive: false} to be cancelable.
     // https://developers.google.com/web/updates/2017/01/scrolling-intervention
-    const thisNode = ReactDOM.findDOMNode(this);
+    const thisNode = this.findDOMNode();
     if (thisNode) {
       addEvent(thisNode, eventsFor.touch.start, this.onTouchStart, {passive: false});
     }
@@ -231,7 +251,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     this.mounted = false;
     // Remove any leftover event handlers. Remove both touch and mouse handlers in case
     // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
-    const thisNode = ReactDOM.findDOMNode(this);
+    const thisNode = this.findDOMNode();
     if (thisNode) {
       const {ownerDocument} = thisNode;
       removeEvent(ownerDocument, eventsFor.mouse.move, this.handleDrag);
@@ -243,6 +263,12 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     }
   }
 
+  // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+  // the underlying DOM node ourselves. See the README for more information.
+  findDOMNode(): ?HTMLElement {
+    return this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
+  }
+
   handleDragStart: EventHandler<MouseTouchEvent> = (e) => {
     // Make it possible to attach event handlers on top of this one.
     this.props.onMouseDown(e);
@@ -251,7 +277,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     if (!this.props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false;
 
     // Get nodes. Be sure to grab relative document (could be iframed)
-    const thisNode = ReactDOM.findDOMNode(this);
+    const thisNode = this.findDOMNode();
     if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
       throw new Error('<DraggableCore> not mounted on DragStart!');
     }
@@ -365,7 +391,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     const shouldContinue = this.props.onStop(e, coreEvent);
     if (shouldContinue === false || this.mounted === false) return false;
 
-    const thisNode = ReactDOM.findDOMNode(this);
+    const thisNode = this.findDOMNode();
     if (thisNode) {
       // Remove user-select hack
       if (this.props.enableUserSelectHack) removeUserSelectStyles(thisNode.ownerDocument);

lib/utils/positionFns.js

@@ -1,6 +1,5 @@
 // @flow
 import {isNum, int} from './shims';
-import ReactDOM from 'react-dom';
 import {getTouch, innerWidth, innerHeight, offsetXYFromParent, outerWidth, outerHeight} from './domFns';
 
 import type Draggable from '../Draggable';
@@ -126,7 +125,7 @@ function cloneBounds(bounds: Bounds): Bounds {
 }
 
 function findDOMNode(draggable: Draggable | DraggableCore): HTMLElement {
-  const node = ReactDOM.findDOMNode(draggable);
+  const node = draggable.findDOMNode();
   if (!node) {
     throw new Error('<DraggableCore>: Unmounted during event!');
   }

specs/draggable.spec.jsx

@@ -722,6 +722,7 @@ describe('react-draggable', function () {
         assert(data.y === 100);
         assert(data.deltaX === 100);
         assert(data.deltaY === 100);
+        assert(data.node === ReactDOM.findDOMNode(drag));
       }
       drag = TestUtils.renderIntoDocument(
         <Draggable onDrag={onDrag}>
@@ -733,6 +734,25 @@ describe('react-draggable', function () {
       simulateMovementFromTo(drag, 0, 0, 100, 100);
     });
 
+    it('should call back with correct dom node with nodeRef', function () {
+      function onDrag(event, data) {
+        // Being tricky here and installing the ref on the inner child, to ensure it's working
+        // and not just falling back on ReactDOM.findDOMNode()
+        assert(data.node === ReactDOM.findDOMNode(drag).firstChild);
+      }
+      const nodeRef = React.createRef();
+      drag = TestUtils.renderIntoDocument(
+        <Draggable onDrag={onDrag} nodeRef={nodeRef}>
+          <span>
+            <div ref={nodeRef} />
+          </span>
+        </Draggable>
+      );
+
+      // (element, fromX, fromY, toX, toY)
+      simulateMovementFromTo(drag, 0, 0, 100, 100);
+    });
+
     it('should call back on drag, with values within the defined bounds', function(){
       function onDrag(event, data) {
         assert(data.x === 90);