@geezee/react-ui/esm/utils/use-portal.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useEffect, useState } from 'react';
import useSSR from '../utils/use-ssr';
import { getId } from './collections';

var createElement = function createElement(id) {
  var el = document.createElement('div');
  el.setAttribute('id', id);
  return el;
};

var usePortal = function usePortal() {
  var selectId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getId();
  var id = "cfx-ui-".concat(selectId);

  var _useSSR = useSSR(),
      isBrowser = _useSSR.isBrowser;

  var _useState = useState(isBrowser ? createElement(id) : null),
      _useState2 = _slicedToArray(_useState, 2),
      elSnapshot = _useState2[0],
      setElSnapshot = _useState2[1];

  useEffect(function () {
    var hasElement = document.querySelector("#".concat(id));
    var el = hasElement || createElement(id);

    if (!hasElement) {
      document.body.appendChild(el);
    }

    setElSnapshot(el);
  }, []);
  return elSnapshot;
};

export default usePortal;