Portal

The <Portal/> component renders its children into a new "subtree" outside of current component hierarchy. You can think of it as a declarative appendChild(), or jQuery's $().appendTo(). The children of <Portal/> component will be appended to the container specified.

The component is a light wrapper around React.createPortal with some conveniences around specifying and waiting for the container element.

const [show, setShow] = useState(false);
const containerRef = useRef(null);

let child = <span>But I actually render here!</span>;

<div className="flex flex-col items-center">
  <button
    type="button"
    className="btn"
    onClick={() => setShow(true)}
  >
    Render Child
  </button>
  <div className="bg-brand-200 p-6 rounded-lg shadow my-4">
    <span>It looks like I will render in here.</span>

    <Portal container={containerRef}>
      {show && child}
    </Portal>
  </div>

  <div
    className="bg-brand-200 p-6 rounded-lg shadow "
    ref={containerRef}
  />
</div>;

const [show, setShow] = useState(false);
const containerRef = useRef(null);
let child = <span>But I actually render here!</span>;
<div className="flex flex-col items-center">
  <button
    type="button"
    className="btn"
    onClick={() => setShow(true)}
  >
    Render Child
  </button>
  <div className="bg-brand-200 p-6 rounded-lg shadow my-4">
    <span>It looks like I will render in here.</span>
    <Portal container={containerRef}>
      {show && child}
    </Portal>
  </div>
  <div
    className="bg-brand-200 p-6 rounded-lg shadow "
    ref={containerRef}
  />
</div>;

API

import Portal from 'react-overlays/Portal'

childrenrequired

type:ReactReactElement

containerrequired

A DOM element, Ref to an element, or function that returns either. The container will have the Portal children appended to it.

type:DOMContainer

onRendered

type:(element: any) => void

Portal

#API

#childrenrequired

#containerrequired

#onRendered

API

childrenrequired

containerrequired

onRendered