react-dom#createPortal JavaScript Examples

Modal = (props) => {
  const element = document.createElement('div');
  element.classList.add('overlay');

  useEffect(() => {
    modalRoot.appendChild(element);
    return () => {
      modalRoot.removeChild(element);
    };
  });

  return createPortal(props.children, element);
}

export default function portaledContent(
  Component: React$StatelessFunctionalComponent<any>,
): React$StatelessFunctionalComponent<any> {
  return function PortaledContent({portalContainer, ...rest}: Props) {
    const children = (
      <ErrorBoundary>
        <Component {...rest} />
      </ErrorBoundary>
    );

    return portalContainer != null
      ? createPortal(children, portalContainer)
      : children;
  };
}

Portal = ({children}) => {
  const mount = document.getElementById("portal-root");
  const el = document.createElement("div");

  useEffect(() => {
    mount.appendChild(el);
    return () => mount.removeChild(el);
  }, [el, mount]);

  return createPortal(children, el)
}

render() {
    if (!this.state.visible) return null;

    const bare = this.props.bare;

    const mods = {
      fullscreen: !!this.props.fullscreen,
      bare: this.props.bare,
      visible: this.props.visible || this.state.visible,
    };

    const mixes = [this.transitionClass, this.props.className];

    const modalContent = (
      <Block name="modal" ref={this.modalRef} mod={mods} mix={mixes} onClick={this.onClickOutside}>
        <Elem name="wrapper">
          <Elem name="content" style={this.props.style}>
            {!bare && (
              <Modal.Header>
                <Elem name="title">{this.state.title}</Elem>
                {this.props.allowClose !== false && (
                  <Elem tag={Button} name="close" type="text" style={{ color: "0099FF" }} icon={<LsRemove />} />
                )}
              </Modal.Header>
            )}
            <Elem name="body" mod={{ bare }}>
              {this.body}
            </Elem>
            {this.state.footer && <Modal.Footer>{this.state.footer}</Modal.Footer>}
          </Elem>
        </Elem>
      </Block>
    );

    return createPortal(modalContent, document.body);
  }

IFrame = ({ children, ...props }) => {
  const [contentRef, setContentRef] = useState(null);
  const mountNode = contentRef && contentRef.contentWindow.document.body;

  return (
    <iframe {...props} ref={setContentRef}>
      {mountNode && createPortal(React.Children.only(children), mountNode)}
    </iframe>
  );
}

export default function IFrame({
  children,
  initialSize = 0,
  shouldExpand = true,
  style,
  ...props
}) {
  const [contentRef, setContentRef] = useState(null);
  const [iframeHeight, setIframeHeight] = useState(0);
  const mountNode = contentRef && contentRef.contentWindow.document.body;

  React.useEffect(() => {
    if (contentRef && shouldExpand) {
      setIframeHeight(contentRef.contentWindow.document.body.scrollHeight);
    } else {
      setIframeHeight(initialSize);
    }
  }, [children, contentRef]);

  return (
    <iframe
      {...props}
      sandbox=""
      ref={setContentRef}
      style={Object.assign({}, style, { height: iframeHeight })}
    >
      {mountNode && createPortal(React.Children.only(children), mountNode)}
    </iframe>
  );
}

ToolItemGroup = ({ children, className, ...remainingProps }) => {
  const [menuLinkElement, setMenuLinkElement] = useState();
  const { isMobile, shortcutClassName } = useContext(HeaderContext);
  useEffect(() => {
    setMenuLinkElement(document.querySelector('.fr-header__menu .fr-links-group'));
  }, [shortcutClassName, setMenuLinkElement, menuLinkElement, isMobile]);

  return (
    <div
      className={classNames(className, 'fr-header__tools-links')}
      {...dataAttributes.getAll(remainingProps)}
    >
      {isMobile && menuLinkElement && createPortal(children, menuLinkElement)}
      <ul className="fr-links-group">
        {children}
      </ul>
    </div>
  );
}

Modal = ({ children }) => {
  modalRoot = modalRoot ? modalRoot : document.getElementById("modal");

  const elRef = useRef(null);
  if (!elRef.current) {
    elRef.current = document.createElement("div");
  }

  useEffect(() => {
    modalRoot.appendChild(elRef.current);
    return () => modalRoot.removeChild(elRef.current);
  }, []);

  return createPortal(<div>{children}</div>, elRef.current);
}

PrependPortal = ({ targetSelector, children }) => {
  const container = React.useRef(document.createElement('div'))
  container.current.setAttribute('class', 'tako-container')

  React.useEffect(() => {
    const containerElement = container.current

    try {
      document
        .querySelector(targetSelector)
        .insertAdjacentElement('beforebegin', containerElement)
    } catch (error) {
      console.log(error)
    }

    return () => {
      containerElement.remove()
    }
  }, [targetSelector])

  return createPortal(children, container.current)
}

PokeNotification = ({ to, from }) => {
    const text = to.id === from.id ?
        Config.poke.selfPoke :
        Config.poke.fromText.replace('{user}', from.username)
    return createPortal(
        <div className="poke poke-notification">
            <div className="poke-icon">
                <FontAwesomeIcon icon={Config.poke.fontAwesomeIcon} />
            </div>
            <div className="poke-notification-text">{text}</div>
        </div>,
        document.body
    )
}

Modal = ({ children, ...props }) => {
  const modalRef = useRef(null);

  if (!modalRef.current) {
    modalRef.current = document.createElement('div');
  }

  useEffect(() => {
    document.body.appendChild(modalRef.current);
    return () => {
      document.body.removeChild(modalRef.current);
    };
  });

  const { onCancel } = props;

  return createPortal(
    <Dialog {...props} onCancel={onCancel} onClose={onCancel}>
      {children}
    </Dialog>,
    modalRef.current,
  );
}

AppMessage = (props) => {
    const { isVisible, message, variant, timeout, onHideMessage } = props;
    if (isVisible) {
        return createPortal(
            <Message
                isVisible={isVisible}
                message={message}
                variant={variant}
                timeout={timeout}
                onHideMessage={onHideMessage}
            />,
            document.body,
        );
    }
    return null;
}

Portal = forwardRef(
  ({ children, container, isDisabled = false, onRendered }, ref) => {
    const [mountNode, setMountNode] = useState(null);
    const handleRef = useMergeRefs(children.ref, ref);
    useIsomorphicEffect(() => {
      if (!isDisabled) {
        setMountNode(getContainer(container) || document.body);
      }
    }, [container, isDisabled]);

    useIsomorphicEffect(() => {
      if (mountNode && !isDisabled) {
        assignRef(ref, mountNode);
        return () => {
          assignRef(ref, null);
        };
      }

      return undefined;
    }, [ref, mountNode, isDisabled]);

    useIsomorphicEffect(() => {
      if (onRendered && (mountNode || isDisabled)) {
        onRendered();
      }
    }, [onRendered, mountNode, isDisabled]);

    if (isDisabled) {
      Children.only(children);
      return cloneElement(children, {
        ref: handleRef,
      });
    }
    return mountNode ? createPortal(children, mountNode) : mountNode;
  },
)

export default function MovieSidebarPortal({ children }) {
  const elRef = useRef(null);

  if (!elRef.current) {
    const div = document.createElement("div");
    elRef.current = div;
  }

  useEffect(() => {
    const movieSidebarRoot = document.getElementById("movieSidebar");
    movieSidebarRoot.appendChild(elRef.current);
    return () => movieSidebarRoot.removeChild(elRef.current);
  }, []);
  return createPortal(<div>{children}</div>, elRef.current);
}

Portal = ({ id, children }) => {
  const wrapper = getPortalWrapper(id);

  /**
   * the following effect returns a clean-up function to be performed
   * on component will unmount, if the given wrapper is empty then remove it.
   */
  useEffect(() => () => {
    if (wrapper && wrapper.innerHTML === '') {
      wrapper.remove();
    }
  }, []);

  return createPortal(children, wrapper);
}

IS_REACT_16 = !!createPortal

TooltipTrigger = ({
	children,
	// Some defaults changed in the hook implementation.
	// For backward compatibility we have to override them here.
	closeOnReferenceHidden = true,
	defaultTooltipShown,
	getTriggerRef,
	modifiers,
	onVisibilityChange,
	placement = 'right',
	portalContainer = canUseDOM ? document.body : null,
	tooltip,
	tooltipShown,
	usePortal = canUseDOM,
	...rest
}) => {
	const {
		triggerRef,
		getArrowProps,
		getTooltipProps,
		setTooltipRef,
		setTriggerRef,
		visible,
		state,
	} = usePopperTooltip(
		{
			// Some props renamed in the hook implementation.
			defaultVisible: defaultTooltipShown,
			onVisibleChange: onVisibilityChange,
			visible: tooltipShown,
			closeOnTriggerHidden: closeOnReferenceHidden,
			...rest,
		},
		{
			placement,
			modifiers,
		}
	);
	const reference = children({
		// No longer required, for backward compatibility.
		getTriggerProps: props => props,
		triggerRef: setTriggerRef,
	});

	const popper = tooltip({
		tooltipRef: setTooltipRef,
		getArrowProps,
		getTooltipProps,
		placement: state ? state.placement : undefined,
	});

	useEffect(() => {
		if (typeof getTriggerRef === 'function') {
			getTriggerRef(triggerRef);
		}
	}, [triggerRef, getTriggerRef]);

	return (
		<Fragment>
			{reference}
			{visible ? (usePortal ? createPortal(popper, portalContainer) : popper) : null}
		</Fragment>
	);
}

PortalContext = props => createPortal(<ContextMenu {...props} />, document.body)

render() {
    if (!this.state.visible) return null;

    const bare = this.props.bare;

    const mods = {
      fullscreen: !!this.props.fullscreen,
      bare: this.props.bare,
      visible: this.props.visible || this.state.visible,
    };

    const mixes = [
      this.transitionClass,
      this.props.className,
    ];

    const modalContent = (
      <Block name="modal" ref={this.modalRef} mod={mods} mix={mixes} onClick={this.onClickOutside}>
        <Elem name="wrapper">
          <Elem name="content" style={this.props.style}>
            {!bare && (
              <Modal.Header>
                <Elem name="title">{this.state.title}</Elem>
                {this.props.allowClose !== false  && (
                  <Elem tag={Button} name="close" type="text" icon={<Icon size="18" color="#0099FF" icon={FaTimes}/>}/>
                )}
              </Modal.Header>
            )}
            <Elem name="body" mod={{ bare }}>
              {this.body}
            </Elem>
            {this.state.footer && (
              <Modal.Footer>
                {this.state.footer}
              </Modal.Footer>
            )}
          </Elem>
        </Elem>
      </Block>
    );

    return createPortal(modalContent, document.body);
  }

PortalInner =
/*#__PURE__*/
function (_Component) {
  _inherits(PortalInner, _Component);

  function PortalInner() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, PortalInner);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(PortalInner)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "handleRef", function (c) {
      handleRef(_this.props.innerRef, c);
    });

    return _this;
  }

  _createClass(PortalInner, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      _invoke(this.props, 'onMount', null, this.props);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      _invoke(this.props, 'onUnmount', null, this.props);
    }
  }, {
    key: "render",
    value: function render() {
      if (!isBrowser()) return null;
      var _this$props = this.props,
          children = _this$props.children,
          _this$props$mountNode = _this$props.mountNode,
          mountNode = _this$props$mountNode === void 0 ? document.body : _this$props$mountNode;
      return createPortal(React.createElement(Ref, {
        innerRef: this.handleRef
      }, children), mountNode);
    }
  }]);

  return PortalInner;
}(Component)

Portal = ({ id, children }) => {
  const target = usePortal(id);
  return createPortal(children, target);
}

DialogWrapper = ({ children, isMobile }) => (isMobile ? createPortal(
  <div className="react-google-flight-datepicker">
    {children}
  </div>,
  document.querySelector('body'),
) : (<>{children}</>))

export default function Portal({ id, children }) {
  const target = usePortal(id);
  return createPortal(children, target);
}

Modal = ({ children, onClose, className, shouldClose }) => {
  const [show, setShow] = useState(false)
  const [shouldCloseInt, setShouldCloseInt] = useState(false)

  const bgProps = useSpring({
    config: { duration: 150 },
    opacity: show ? 0.7 : 0
  })

  const modalProps = useSpring({
    config: { mass: 0.75, tension: 300, friction: 20 },
    opacity: show ? 1 : 0,
    transform: show ? 'translate3d(0px,0,0)' : 'translate3d(0,-100px,0)'
  })

  const el = useRef(document.createElement('div'))

  function doClose() {
    setShow(false)
    return setTimeout(onClose, 150)
  }

  useEffect(() => {
    document.body.appendChild(el.current)
    document.getElementById('app').style.filter = 'blur(2px)'
    function onKeyDown(e) {
      // Esc
      if (e.keyCode === 27) {
        doClose()
      }
    }
    document.addEventListener('keydown', onKeyDown)
    setShow(true)
    return () => {
      document.getElementById('app').style.filter = ''
      document.removeEventListener('keydown', onKeyDown)
      el.current.parentElement.removeChild(el.current)
    }
  }, [el])

  useEffect(() => {
    let timeout
    if (shouldClose || shouldCloseInt) {
      timeout = doClose()
    }
    return () => clearTimeout(timeout)
  }, [el, shouldClose, shouldCloseInt])

  const cmp = (
    <>
      <animated.div className="modal-backdrop" style={bgProps} />
      <animated.div
        className="modal d-block"
        tabIndex="-1"
        style={modalProps}
        onMouseDown={() => setShouldCloseInt(true)}
      >
        <div
          onMouseDown={(e) => e.stopPropagation()}
          className={`modal-dialog modal-dialog-centered ${className || ''}`}
          role="document"
        >
          <div className="modal-content">{children}</div>
        </div>
      </animated.div>
    </>
  )

  return createPortal(cmp, el.current)
}

Drop =
/*#__PURE__*/
function (_Component) {
  _inheritsLoose(Drop, _Component);

  function Drop() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;

    _defineProperty(_assertThisInitialized(_this), "originalFocusedElement", document.activeElement);

    _defineProperty(_assertThisInitialized(_this), "dropContainer", getNewContainer());

    return _this;
  }

  var _proto = Drop.prototype;

  _proto.componentWillUnmount = function componentWillUnmount() {
    var restrictFocus = this.props.restrictFocus;

    if (restrictFocus && this.originalFocusedElement) {
      if (this.originalFocusedElement.focus) {
        setFocusWithoutScroll(this.originalFocusedElement);
      } else if (this.originalFocusedElement.parentNode && this.originalFocusedElement.parentNode.focus) {
        // required for IE11 and Edge
        setFocusWithoutScroll(this.originalFocusedElement.parentNode);
      }
    }

    document.body.removeChild(this.dropContainer);
  };

  _proto.render = function render() {
    var _this$props = this.props,
        dropTarget = _this$props.target,
        rest = _objectWithoutPropertiesLoose(_this$props, ["target"]);

    return createPortal(React.createElement(DropContainer, _extends({
      dropTarget: dropTarget
    }, rest)), this.dropContainer);
  };

  return Drop;
}(Component)

PortalInner = /*#__PURE__*/function (_Component) {
  _inheritsLoose(PortalInner, _Component);

  function PortalInner() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;

    _this.handleRef = function (c) {
      handleRef(_this.props.innerRef, c);
    };

    return _this;
  }

  var _proto = PortalInner.prototype;

  _proto.componentDidMount = function componentDidMount() {
    _invoke(this.props, 'onMount', null, this.props);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    _invoke(this.props, 'onUnmount', null, this.props);
  };

  _proto.render = function render() {
    if (!isBrowser()) return null;
    var _this$props = this.props,
        children = _this$props.children,
        _this$props$mountNode = _this$props.mountNode,
        mountNode = _this$props$mountNode === void 0 ? document.body : _this$props$mountNode;
    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Ref, {
      innerRef: this.handleRef
    }, children), mountNode);
  };

  return PortalInner;
}(Component)

render() {
    if (!isBrowser()) return null
    const { children, mountNode = document.body } = this.props

    return createPortal(<Ref innerRef={this.handleRef}>{children}</Ref>, mountNode)
  }

function StickyHeadInner(props, ref) {
  const {
    onFixed,
    top: offsetTop = 0,
    bottom: offsetBottom = 0,
    container: propsContainer,
    ...other
  } = props;
  const top = typeof offsetTop === 'number' ? offsetTop : parseInt(offsetTop, 10);
  const bottom = typeof offsetBottom === 'number' ? offsetBottom : parseInt(offsetBottom, 10);

  const [positionFixed, updatePositionFixed] = useState('top');
  const [refScrollContainer, updateRefScrollContainer] = useState(null);
  const [container, updateContainerNode] = useState(propsContainer);

  const { self } = useContext(ContextTable);
  const heightHeader = refScrollContainer ? refScrollContainer.offsetHeight : 0;
  let lastScrollLeft = 0;

  const setPositionFixed = (positionFixed) => {
    updatePositionFixed(positionFixed);
    fireFn(onFixed, positionFixed);
  };

  const getPositionContainer = (container) => {
    if (!container || !container.getBoundingClientRect) {
      return { top: undefined, bottom: undefined, left: undefined };
    }
    const { top, bottom, left } = container.getBoundingClientRect();

    return { top, bottom, left };
  };

  const setLeftPositionContainerSticky = (positionContainerLeft, positionFixed) => {
    if (!refScrollContainer) {
      return false;
    }

    const containerStickyNode = refScrollContainer.parentNode;
    let left = 'auto';

    if (positionFixed === 'fixed') {
      left = `${positionContainerLeft}px`;
    }

    containerStickyNode.style.left = left;
  };

  const updatePositionContainer = (coordinate, position) => {
    setPositionFixed(position);
    setLeftPositionContainerSticky(coordinate.left, position);
  };

  const setPositionContainer = useEventCallback(() => {
    const { scrollTop, scrollLeft } = document.documentElement;
    const { top: topContainer, bottom: bottomContainer, left } = getPositionContainer(container);

    const min = topContainer + scrollTop - top;
    const max = bottomContainer + scrollTop - top - heightHeader - bottom;

    if (scrollTop >= min && scrollTop <= max && positionFixed !== 'fixed') {
      updatePositionContainer({ left }, 'fixed');
    }
    if (scrollTop < min && positionFixed !== 'top') {
      updatePositionContainer({ left }, 'top');
    }
    if (scrollTop > max && positionFixed !== 'bottom') {
      updatePositionContainer({ left }, 'bottom');
    }

    if (lastScrollLeft !== scrollLeft) {
      lastScrollLeft = scrollLeft;
      setLeftPositionContainerSticky(left, positionFixed);
    }
  });

  const getScrollPage = throttle(setPositionContainer);

  let masterScrollActive = false;
  let slaveScrollActive = false;

  const handleScroll = throttle((e) => {
    if (!refScrollContainer || !container) return false;

    const { target } = e;
    const { scrollLeft } = target;

    masterScrollActive = [...target.classList].includes('_master-scroll');
    slaveScrollActive = !masterScrollActive;

    if (!slaveScrollActive) {
      slaveScrollActive = true;
      container.scrollLeft = scrollLeft;
      slaveScrollActive = false;
    }

    if (!masterScrollActive) {
      masterScrollActive = true;
      refScrollContainer.scrollLeft = scrollLeft;
      masterScrollActive = false;
    }
  });

  useEffect(
    function updateContainer() {
      if (!canUseDOM()) {
        return;
      }

      if (container) {
        getScrollPage();
        document.addEventListener('scroll', getScrollPage);
      } else {
        updateContainerNode(getScrollParent(getNodeByRef(self.ref)));
      }
      return () => {
        getScrollPage.cancel();
        document.removeEventListener('scroll', getScrollPage);
      };
    },
    [container],
  );

  useEffect(
    function updateScrollContainer() {
      if (refScrollContainer) {
        refScrollContainer.addEventListener('scroll', handleScroll);
      }
      return () => {
        handleScroll.cancel();
        refScrollContainer && refScrollContainer.removeEventListener('scroll', handleScroll);
      };
    },
    [refScrollContainer],
  );

  const updateSizeAndPositionContainer = useEventCallback(() => {
    setPositionContainer();

    if (refScrollContainer && container) {
      refScrollContainer.style.width = `${container.clientWidth}px`;
    }

    if (positionFixed === 'fixed') {
      const { left } = getPositionContainer(container);
      setLeftPositionContainerSticky(left, positionFixed);
    }
    setLeftPositionContainerSticky('auto', positionFixed);
  });

  useEffect(
    function addListenerToContainer() {
      if (refScrollContainer && container) {
        container.addEventListener('scroll', handleScroll);
      }

      return () => {
        container && container.removeEventListener('scroll', handleScroll);
      };
    },
    [container, refScrollContainer],
  );

  useEffect(
    function addResizeObserverToContainer() {
      let resizeObserver = null;

      if (container) {
        resizeObserver = new ResizeObserver(updateSizeAndPositionContainer);
        resizeObserver.observe(container);
      }

      return () => {
        resizeObserver && resizeObserver.disconnect();
      };
    },
    [container],
  );

  if (!container) return null;

  const tableDOM = container.getElementsByTagName('table')[0];

  return (
    <StickyHeadContext.Provider value={{ container, tableDOM }}>
      {createPortal(
        <ContainerStickyCore
          setRefContainer={updateRefScrollContainer}
          positionFixed={positionFixed}
          top={top}
          bottom={bottom}
          ref={ref}
          {...other}
        />,
        container,
      )}
    </StickyHeadContext.Provider>
  );
}

function Popup({ onClicks, show, add, slug, generated }) {
  const [copied, setCopy] = useState(false);

  const copyTextref = useRef(null);

  useEffect(() => {
    if (!generated && show) add();
  });

  const copyText = () => {
    if (generated) {
      const node = copyTextref.current;
      if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
        document.execCommand('copy');
        setCopy(true);
      } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        setCopy(true);
      }
    }
  };

  const Generate = () => {
    setCopy(false);
    add();
  };

  return show
    ? createPortal(
        <div
          style={{
            backgroundColor: 'rgb(0 0 0 / 70%)',
            placeItems: 'center',
          }}
          tabIndex="0"
          onClick={onClicks}
          id="popupmain"
          className="fixed outline-none z-50 top-0 grid h-screen w-screen"
        >
          <div className="w-11/12 lg:w-4/12 shadow-2xl rounded bg-secondary">
            <div className="p-3">
              <header className="flex justify-between">
                <div className="flex-1 text-white  uppercase font-sans text-md font-bold">
                  Invite friends to your room
                </div>
                <div
                  tabIndex="0"
                  role="button"
                  aria-pressed={show}
                  onKeyDown={onClicks}
                  onClick={onClicks}
                  id="closeButtons"
                >
                  <svg
                    id="closeButtons"
                    aria-hidden="false"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                  >
                    <path
                      className="text-accent"
                      fill="currentColor"
                      d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"
                    />
                  </svg>
                </div>
              </header>
              <div className={`mt-3 ${Styles.gray1} text-sm`}>
                Share this link with your friend to grant access to your room!
              </div>
              <div className="flex justify-evenly mt-2 p-2 rounded bg-primary">
                <div
                  onClick={copyText}
                  onKeyDown={copyText}
                  tabIndex={0}
                  role="button"
                  ref={copyTextref}
                  className="flex-1 text-white overflow-hidden"
                >
                  {generated ? `https://linlp.vercel.app/${slug}` : slug}
                </div>
                <div
                  onClick={copyText}
                  onKeyDown={copyText}
                  tabIndex={0}
                  role="button"
                  className="rounded  bg-accent text-white px-3 text-sm"
                >
                  {copied ? 'copied' : 'copy'}
                </div>
              </div>
              <div className={`${Styles.gray1} text-xs mt-1`}>
                Your invite link expires only when accepted.
              </div>
            </div>
            <div
              style={{ borderRadius: '0px 0px 0.25rem 0.25rem' }}
              className="w-full border-bottom bg-primary text-white p-4 flex justify-evenly"
            >
              <div className="flex-1">Generate another URL</div>
              <div
                onKeyDown={copyText}
                tabIndex={0}
                role="button"
                onClick={Generate}
                className="rounded-sm bg-secondary p-1 flex items-center text-white cursor-pointer px-3 text-sm"
              >
                Generate
              </div>
            </div>
          </div>
        </div>,
        document.querySelector('#popup'),
      )
    : null;
}