Added RefObject as valid Link innerRef (#6567)

* Added RefObject as valid Link innerRef. * Added changes to changelog. * Update CHANGES.md
remix-run · Jan 31, 2019 · 89a72d5 · 89a72d5
1 parent f770efd
commit 89a72d5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/packages/react-router-dom/.size-snapshot.json b/packages/react-router-dom/.size-snapshot.json
@@ -1,8 +1,8 @@
 {
   "esm/react-router-dom.js": {
-    "bundled": 8025,
-    "minified": 4824,
-    "gzipped": 1611,
+    "bundled": 8092,
+    "minified": 4881,
+    "gzipped": 1633,
     "treeshaked": {
       "rollup": {
         "code": 453,
@@ -14,9 +14,9 @@
     }
   },
   "umd/react-router-dom.js": {
-    "bundled": 161252,
-    "minified": 57435,
-    "gzipped": 16465
+    "bundled": 161325,
+    "minified": 57478,
+    "gzipped": 16483
   },
   "umd/react-router-dom.min.js": {
     "bundled": 97926,

diff --git a/packages/react-router-dom/docs/api/Link.md b/packages/react-router-dom/docs/api/Link.md
@@ -56,6 +56,16 @@ const refCallback = node => {
 <Link to="/" innerRef={refCallback} />
 ```
 
+## innerRef: RefObject
+
+Get the underlying `ref` of the component with `React.createRef()`
+
+```jsx
+const anchorRef = React.createRef()
+
+<Link to="/" innerRef={anchorRef} />
+```
+
 ## others
 
 You can also pass props you'd like to be on the `<a>` such as a `title`, `id`, `className`, etc.
diff --git a/packages/react-router-dom/modules/Link.js b/packages/react-router-dom/modules/Link.js
@@ -59,7 +59,11 @@ class Link extends React.Component {
 
 if (__DEV__) {
   const toType = PropTypes.oneOfType([PropTypes.string, PropTypes.object]);
-  const innerRefType = PropTypes.oneOfType([PropTypes.string, PropTypes.func]);
+  const innerRefType = PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+  ]);
 
   Link.propTypes = {
     innerRef: innerRefType,

diff --git a/packages/react-router-dom/modules/__tests__/Link-test.js b/packages/react-router-dom/modules/__tests__/Link-test.js
@@ -91,7 +91,7 @@ describe("A <Link>", () => {
     });
   });
 
-  it("exposes its ref via an innerRef prop", done => {
+  it("exposes its ref via an innerRef callback prop", done => {
     function refCallback(n) {
       if (n) {
         expect(n.tagName).toEqual("A");
@@ -109,6 +109,29 @@ describe("A <Link>", () => {
     );
   });
 
+  it("exposes its ref via an innerRef RefObject prop", done => {
+    const refObject = {
+      get current() {
+        return null;
+      },
+      set current(n) {
+        if (n) {
+          expect(n.tagName).toEqual("A");
+          done();
+        }
+      }
+    };
+
+    renderStrict(
+      <MemoryRouter>
+        <Link to="/" innerRef={refObject}>
+          link
+        </Link>
+      </MemoryRouter>,
+      node
+    );
+  });
+
   describe("with a <HashRouter>", () => {
     afterEach(() => {
       window.history.replaceState(null, "", "#");