Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React wrapper not working with components with contexts

See original GitHub issue

Repro

Open Codesandbox: https://codesandbox.io/s/9yr3rmrkny

Current Behaviour

Tippy tooltip is rendered outside of the react dom tree. That makes it impossible for elements with context (eg: Link from react-router) to work properly

Expected behavior

useContext flag renders tippy instance inside of React’s context DOM. react-tippy uses this flag and works great, but that library hasn’t been updated in ages and currently has some positioning bugs .

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

atomikscommented, Sep 5, 2018

The gist has been updated to use ReactDOM.findDOMNode() to work with components as children (not just elements). Only the content needs a ref.

I’m pretty sure it now:

Works with components as children (using findDOMNode())
React Router context as the html is part of the React element tree using a ref

Please see the official React component for v3. v3 is much better because any prop can be updated (ones that affect the appearance of the tooltip) unlike v2 which only updates the tooltip content, due to the new set() method.

1reaction

atomikscommented, Sep 5, 2018

I think I got it working! 🎉 Just use refs:

Please see: https://gist.github.com/atomiks/25ba93a551fc1e8a1ef18aa7669c6699