Fix issue where a React element wouldn't scroll by ref

Author: ganderzz

package.json

@@ -35,33 +35,33 @@
     "react": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.1.2",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
-    "@babel/preset-env": "7.1.0",
+    "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "7.2.3",
+    "@babel/preset-env": "7.2.3",
     "@babel/preset-react": "7.0.0",
-    "@storybook/react": "4.0.2",
-    "all-contributors-cli": "5.4.1",
+    "@storybook/react": "4.1.6",
+    "all-contributors-cli": "5.7.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "23.6.0",
-    "babel-loader": "8.0.4",
+    "babel-loader": "8.0.5",
     "copy-webpack-plugin": "4.6.0",
     "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "1.6.0",
-    "eslint": "5.8.0",
+    "eslint": "5.12.0",
     "eslint-config-airbnb": "17.1.0",
-    "eslint-config-prettier": "3.1.0",
+    "eslint-config-prettier": "3.3.0",
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-react": "7.11.1",
-    "husky": "1.1.3",
+    "eslint-plugin-react": "7.12.3",
+    "husky": "1.3.1",
     "jest": "23.6.0",
-    "lint-staged": "8.0.4",
-    "prettier": "1.14.3",
-    "react": "16.6.0",
-    "react-dom": "16.6.0",
-    "react-testing-library": "5.2.3",
-    "webpack": "4.24.0",
-    "webpack-cli": "3.1.2"
+    "lint-staged": "8.1.0",
+    "prettier": "1.15.3",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-testing-library": "5.4.4",
+    "webpack": "4.28.4",
+    "webpack-cli": "3.2.1"
   },
   "jest": {
     "setupFiles": [

src/ScrollTo.jsx

@@ -1,4 +1,5 @@
 import React, { Component, createContext } from "react";
+import { findDOMNode } from "react-dom";
 import { relative } from "./utilities/relative";
 
 export const ScrollToContext = createContext("scrollToContext");
@@ -59,6 +60,12 @@ class ScrollTo extends Component {
     const top = ScrollTo._parseLocation(options.y, node, true);
     const left = ScrollTo._parseLocation(options.x, node, false);
 
+    const rNode = findDOMNode(node);
+
+    if (rNode) {
+      node = rNode;
+    }
+
     if (node.scrollTo) {
       node.scrollTo({
         top,

stories/ScrollByRef.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { ScrollStory } from "./";
-import { ScrollTo } from "../src/index";
 import { Object } from "es6-shim";
+import { ScrollStory } from ".";
+import { ScrollTo } from "../src/index";
 
 const refDOM = React.createRef();
 const mockData = {
@@ -11,66 +11,62 @@ const mockData = {
   qty: [1, 200, 3.2, 4, 5, 6.55, 7, 8]
 };
 
-ScrollStory.add("Scroll by Ref", () => {
-  return (
-    <div style={{ overflow: "auto", padding: 20 }}>
-      <ScrollTo>
-        {({ scrollTo }) => (
-          <React.Fragment>
-            <button
-              type="button"
-              onClick={() => scrollTo({ ref: refDOM, y: 700, smooth: true })}
-            >
-              Scroll Ref Down
-            </button>
+ScrollStory.add("Scroll by Ref", () => (
+  <div style={{ overflow: "auto", padding: 20 }}>
+    <ScrollTo>
+      {({ scrollTo }) => (
+        <React.Fragment>
+          <button
+            type="button"
+            onClick={() => scrollTo({ ref: refDOM, y: 700, smooth: true })}
+          >
+            Scroll Ref Down
+          </button>
 
-            <button
-              type="button"
-              style={{ marginLeft: 5 }}
-              onClick={() => scrollTo({ ref: refDOM, y: 0, smooth: true })}
-            >
-              Scroll Ref Up
-            </button>
-          </React.Fragment>
-        )}
-      </ScrollTo>
+          <button
+            type="button"
+            style={{ marginLeft: 5 }}
+            onClick={() => scrollTo({ ref: refDOM, y: 0, smooth: true })}
+          >
+            Scroll Ref Up
+          </button>
+        </React.Fragment>
+      )}
+    </ScrollTo>
 
-      <div
-        ref={refDOM}
-        style={{
-          marginTop: 20,
-          background: "#F1F1F1",
-          height: 1000,
-          maxHeight: 300,
-          overflow: "auto",
-          position: "relative"
-        }}
-      >
-        <div style={{ height: 1000, padding: 20 }}>
-          <table>
-            <thead>
-              <tr>
+    <div
+      ref={refDOM}
+      style={{
+        marginTop: 20,
+        background: "#F1F1F1",
+        height: 1000,
+        maxHeight: 300,
+        overflow: "auto",
+        position: "relative"
+      }}
+    >
+      <div style={{ height: 1000, padding: 20 }}>
+        <table>
+          <thead>
+            <tr>
+              {Object.keys(mockData).map(key => (
+                <th key={key}>{key}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: 40 }).map((_, i) => (
+              <tr key={i}>
                 {Object.keys(mockData).map(key => (
-                  <th key={key}>{key}</th>
+                  <td key={key + i}>
+                    {mockData[key][i % mockData[key].length]}
+                  </td>
                 ))}
               </tr>
-            </thead>
-            <tbody>
-              {Array.from({ length: 40 }).map((_, i) => {
-                return (
-                  <tr key={i}>
-                    {Object.keys(mockData).map(key => (
-                      <td key={key + i}>
-                        {mockData[key][i % mockData[key].length]}
-                      </td>
-                    ))}
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
+            ))}
+          </tbody>
+        </table>
       </div>
     </div>
-  );
-});
+  </div>
+));