fix(handle): only pass handleAxis prop if not DOM element

Fixes #175

Author: STRML

lib/Resizable.js

@@ -152,16 +152,29 @@ export default class Resizable extends React.Component<Props, void> {
     };
   }
 
-  // Render a resize handle given an axis & DOM ref.
+  // Render a resize handle given an axis & DOM ref. Ref *must* be attached for
+  // the underlying draggable library to work properly.
   renderResizeHandle(handleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>): ReactNode {
     const {handle} = this.props;
-    if (handle) {
-      if (typeof handle === 'function') {
-        return handle(handleAxis, ref);
-      }
-      return React.cloneElement(handle, {ref, handleAxis});
+    // No handle provided, make the default
+    if (!handle) {
+      return <span className={`react-resizable-handle react-resizable-handle-${handleAxis}`} ref={ref} />;
+    }
+    // Handle is a function, such as:
+    // `handle={(handleAxis) => <span className={...} />}`
+    if (typeof handle === 'function') {
+      return handle(handleAxis, ref);
     }
-    return <span className={`react-resizable-handle react-resizable-handle-${handleAxis}`} ref={ref} />;
+    // Handle is a React component (composite or DOM).
+    const isDOMElement = handle.type === 'string';
+    const props = {
+      ref,
+      // Add `handleAxis` prop iff this is not a DOM element,
+      // otherwise we'll get an unknown property warning
+      ...(isDOMElement ? {} : {handleAxis})
+    };
+    return React.cloneElement(handle, props);
+
   }
 
   render(): ReactNode {
@@ -173,8 +186,8 @@ export default class Resizable extends React.Component<Props, void> {
 
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
-    // Its original children (resizable's child's children), and
-    // One or more draggable handles.
+    // 1. Its original children (resizable's child's children), and
+    // 2. One or more draggable handles.
     return cloneElement(children, {
       ...p,
       className: `${className ? `${className} ` : ''}react-resizable`,