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

Accessing <Link>'s underlying node via innerRef #5294

Merged
merged 3 commits into from
Jun 28, 2017
Merged

Accessing <Link>'s underlying node via innerRef #5294

merged 3 commits into from
Jun 28, 2017

Conversation

danielberndt
Copy link
Contributor

Use case: react-measure:

I'd like to show a tooltip above a Link. For this I need to know the underlying DOM node's position. Proxying the ref via an innerRef-prop would allow to do this. (I stole the naming from glamorous)

This would allow to extract the position like this:

<Measure bounds>{({measureRef, contentRect}) => 
  <Link to="..." innerRef={measureRef}/>
}</Measure>

But I'm optimistic that other use-cases might benefit from accessing the inner ref as well!

Happy to adapt docs (and tests) in this PR if you think this is worthwhile 🙂

Use case: [`react-measure`](https://github.com/souporserious/react-measure):

I'd like to show a tooltip above a Link. For this I need to know the underlying DOM node's position. Proxying the `ref` via an `innerRef`-prop would allow to do this. (I stole the naming from [`glamorous`](https://github.com/paypal/glamorous#innerref))

This would allow to extract the position like this:

```jsx
<Measure bounds>{({measureRef}) => 
  <Link to="..." innerRef={measureRef}/>
}</Measure>
```

Happy to adapt docs in this PR if you think this is worthwhile :)
@danielberndt danielberndt changed the title Accessing <Link>s underlying node via innerRef Accessing <Link>'s underlying node via innerRef Jun 28, 2017
@timdorr
Copy link
Member

timdorr commented Jun 28, 2017

Mind adding some sort of test for this? Doesn't need to be anything elaborate. Thanks!

@danielberndt
Copy link
Contributor Author

Alright, just added a test and updated the docs. Let me know if there's anything I've missed!

@timdorr
Copy link
Member

timdorr commented Jun 28, 2017

Thanks! LGTM. Since it's a pretty minor change, I'll just merge it in.

@timdorr timdorr merged commit 81c5a02 into remix-run:master Jun 28, 2017
@danielberndt danielberndt deleted the patch-1 branch June 28, 2017 17:40
@irnc
Copy link

irnc commented Aug 3, 2017

@timdorr @danielberndt Do you plan to release this feature in a minor version any time soon?

We need that feature to focus a element. Until it is released, we extended Link and overridden render to add ref.

@timdorr
Copy link
Member

timdorr commented Aug 3, 2017

Waiting on a good time to roll up a minor release. We probably want to coincide with React 16.

@KyleAMathews
Copy link
Contributor

This is released now I'm assuming?

@KyleAMathews
Copy link
Contributor

Ah yeah, there it is https://github.com/ReactTraining/react-router/releases/tag/v4.2.0

@lock lock bot locked as resolved and limited conversation to collaborators Jan 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants