Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added RefObject as valid Link innerRef #6567

Merged
merged 3 commits into from Jan 31, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions 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,
Expand All @@ -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,
Expand Down
10 changes: 10 additions & 0 deletions packages/react-router-dom/docs/api/Link.md
Expand Up @@ -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.
6 changes: 5 additions & 1 deletion packages/react-router-dom/modules/Link.js
Expand Up @@ -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,
Expand Down
25 changes: 24 additions & 1 deletion packages/react-router-dom/modules/__tests__/Link-test.js
Expand Up @@ -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");
Expand All @@ -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, "", "#");
Expand Down