@twilio-paste/paste-reakit-fork/es/Portal/Portal.js

Forked Reakit that addresses SSR hydration issues

import { createContext, useContext, useState, useEffect, createElement } from 'react';
import { canUseDOM } from 'reakit-utils/canUseDOM';
import { createPortal } from 'react-dom';

function getBodyElement() {
  return canUseDOM ? document.body : null;
}

var PortalContext = /*#__PURE__*/createContext(getBodyElement());
function Portal(_ref) {
  var children = _ref.children;
  // if it's a nested portal, context is the parent portal
  // otherwise it's document.body
  // https://github.com/reakit/reakit/issues/513
  var context = useContext(PortalContext) || getBodyElement();

  var _React$useState = useState(null),
      hostNode = _React$useState[0],
      setHostNode = _React$useState[1];

  useEffect(function () {
    if (!context) return undefined;
    var element = document.createElement("div");
    element.className = Portal.__className;
    setHostNode(element);
    context.appendChild(element);
    return function () {
      context.removeChild(element);
    };
  }, [context]);

  if (hostNode) {
    return /*#__PURE__*/createPortal( /*#__PURE__*/createElement(PortalContext.Provider, {
      value: hostNode
    }, children), hostNode);
  } // ssr


  return null;
}
Portal.__className = "__reakit-portal";
Portal.__selector = "." + Portal.__className;

export { Portal, PortalContext };