@acrool/react-portal/dist/acrool-react-portal.es.js

Portal library based for Reactjs

var c = Object.defineProperty;
var u = (t, r, e) => r in t ? c(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
var o = (t, r, e) => u(t, typeof r != "symbol" ? r + "" : r, e);
import a, { useState as d, useEffect as h } from "react";
import i from "react-dom";
function f(t) {
  return Object.keys(t);
}
function l(t) {
  const r = document.createElement("div");
  return r.id = t.id, t.className && (r.className = t.className), t.style && f(t.style).forEach((e) => {
    var n;
    r.style[e] = (n = t.style) == null ? void 0 : n[e];
  }), r;
}
class m extends a.Component {
  constructor(e) {
    super(e);
    o(this, "_el", null);
    o(this, "renderPortal", () => this._el ? i.createPortal(
      this.props.children,
      this._el
    ) : null);
    !(typeof window > "u") && (this._el = l(e));
  }
  get typeProps() {
    return this.props;
  }
  componentDidMount() {
    this._el = this._el ? this._el : l(this.props);
    const e = this.typeProps.containerSelector();
    e == null || e.appendChild(this._el);
  }
  componentWillUnmount() {
    if (!this._el) return;
    const e = this.typeProps.containerSelector();
    e == null || e.removeChild(this._el);
  }
  render() {
    return this.renderPortal();
  }
}
o(m, "defaultProps", {
  containerSelector: () => document.body
});
const M = ({
  children: t,
  containerSelector: r = () => document.body
}) => {
  const [e, n] = d(!1);
  return h(() => {
    n(!0);
  }, []), (() => {
    const s = r();
    return e && s ? i.createPortal(t, s) : null;
  })();
};
export {
  M as ReactDidMountPortal,
  m as default
};