use-portal

With a pre-existing Element•
Without a pre-existing Element

Since: ver.2.4.0 Returns an existing or newly created Element with the given id, to be used as the container for the createPortal API.

With a pre-existing Element

If the hook finds an element with the given ID, it returns the element.

Inspect the code to find the portal content inserted in the yank div.

import { createPortal } from 'react-dom';
import { usePortal } from '@flixbus/honeycomb-react';

const ExamplePortal = ({ portalId, children }) => {
  const container = usePortal(portalId);

  return createPortal(children, container);
}

<>
  <div id="yank"></div>
  <ExamplePortal portalId="yank">
    Hi there!
  </ExamplePortal>
</>
import { createPortal } from 'react-dom';
import { usePortal } from '@flixbus/honeycomb-react';

const ExamplePortal = ({ portalId, children }) => {
  const container = usePortal(portalId);

  return createPortal(children, container);
}

<>
  <div id="yank"></div>
  <ExamplePortal portalId="yank">
    Hi there!
  </ExamplePortal>
</>

Without a pre-existing Element

If the hook can't find an element with the given ID: creates a new <div> with the given ID and then appends it to the end of document.body.

Inspect the code and go to the end of the document to find a div with an id yoink.

import { createPortal } from 'react-dom';
import { usePortal } from '@flixbus/honeycomb-react';

const ExamplePortal = ({ portalId, children }) => {
  const container = usePortal(portalId);

  return createPortal(children, container);
}

<ExamplePortal portalId="yoink">
  Hello!
</ExamplePortal>
import { createPortal } from 'react-dom';
import { usePortal } from '@flixbus/honeycomb-react';

const ExamplePortal = ({ portalId, children }) => {
  const container = usePortal(portalId);

  return createPortal(children, container);
}

<ExamplePortal portalId="yoink">
  Hello!
</ExamplePortal>