How to get ref from a React 16 portal?

Question

Is there a way to get ref from a React 16 portal. I tried the following approach but it doesn't seem to work:

const Tooltip = props => (
  ReactDOM.createPortal(
    <div>{props.children}</div>,
    // A DOM element
    document.body
  )
);

class Info extends React.Component {
   render() {
      return (
        <Tooltip 
          ref={ el => this.tooltip = el }
        >
          My content
        </Tooltip>
      ); 
   }

   componentDidMount() {
      console.log(this.tooltip); // undefined
   }
}

I need the ref in order to dynamically calculate the element final position!

https://codepen.io/anon/pen/QqmBpB

Shortbread

What is weird is that you use this to render into body. I mean, for a portal you need a valid dom element in the first place? – Bartholomeo

isn't document.body a valid dom element? – Shortbread

Yes, sure. I get it’s just an example. But it seems the wrong way round what you’re trying. After all, The root dom of the portal is the one you’re rendering into. I suspect that for normal components actually rendering jsx objects ref should still work. Can you try that? – Bartholomeo

I think I got the problem. ReactDOM.createPortal returns returns a ReactPortal instance, which is a valid ReactNode but not a valid DOM element – Shortbread

Answer 1

ReactDOM.createPortal returns a ReactPortal instance, which is a valid ReactNode but not a valid DOM element. At the same time createPortal will honour the component context. So I moved the function call to be inside the render method and it solved the issue.

class Info extends React.Component {
  render() {
    // I moved the portal creation to be here
    return ReactDOM.createPortal(
       // A valid DOM node!!
       <div ref={ el => this.tooltip = el }>{props.children}</div>,
       // A DOM element
       document.body
    ); 
  }

  componentDidMount() {
     console.log(this.tooltip); // HTMLDivElement
  }
}

Shortbread

If you wanted to keep Info and App separate, you could get access to the Info portal's DOM node from App with this.tooltip.tooltip – Fluecure

Answer 2

If you want to do it with hooks, you can also do

import { createPortal } from 'react-dom'
import React, { useRef } from 'react'

const Portal = ({ children }) => {
  const portal = useRef(document.createElement('div'))
  return createPortal(children, portal.current)
}

Also, in your exact example, you would need to use forwardRef since you can't pass refs to children without it.

const Tooltip = forwardRef((props, ref) => (
  createPortal(
    <div ref={ref}>{props.children}</div>,
    // A DOM element
    document.body
  )
));

const Info = () => {
  const ref = useRef()
  return (
    <Tooltip ref={ref}>
      My content
    </Tooltip>
  )
}

This last bit is not tested, but I'm pretty sure it'll work.

Alethaalethea

Thanks for the version on the Hooks with forwardRef + createPortal. Exactly what I was looking for. – Scopas

Answer 3

You need to use this.tooltip.props.children in App component and use the following code for the Tooltip component:

const appRoot = document.getElementById('app-root');
const tooltipRoot = document.getElementById('tooltip-root');

class Tooltip extends Component {
  constructor(props) {
    super(props);
    // Create a div that we'll render the Tooltip into
    this.el = document.createElement('div');
  }

  componentDidMount() {
    // Append the element into the DOM on mount.
    tooltipRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    // Remove the element from the DOM when we unmount
    tooltipRoot.removeChild(this.el);
  }

  render() {
    // Use a portal to render the children into the element
    return ReactDOM.createPortal(
      // Any valid React child: JSX, strings, arrays, etc.
      this.props.children,
      // A DOM element
      this.el,
    );
  }
}

class App extends React.Component {
      componentDidMount() {
        console.log(this.tooltip.props.children);
      }
      render() {
        return (
          <div>
            <Tooltip ref={ el => this.tooltip = el }>
              My content
            </Tooltip>
          </div>
        );
      }
    }

ReactDOM.render(<App />, appRoot);

Working demo https://codepen.io/jorgemcdev/pen/aLYRVQ, based on Dan Abramov code sample https://codepen.io/gaearon/pen/jGBWpE

Bronze