Function useOverlay

packages/react/src/hooks/useOverlay.ts:18–96

(
  displayName: string,
  controller: { create: (options: OptionsType) => Promise<OverlayType> },
  defineCustomElement: () => void,
  component: ReactComponentOrElement,
  componentProps?: any
)

}

export function useOverlay<OptionsType, OverlayType extends OverlayBase>(
  displayName: string,
  controller: { create: (options: OptionsType) => Promise<OverlayType> },
  defineCustomElement: () => void,
  component: ReactComponentOrElement,
  componentProps?: any
) {
  const overlayRef = useRef<OverlayType>();
  const containerElRef = useRef<HTMLDivElement>();
  const didDismissEventName = useMemo(() => `on${displayName}DidDismiss`, [displayName]);
  const didPresentEventName = useMemo(() => `on${displayName}DidPresent`, [displayName]);
  const willDismissEventName = useMemo(() => `on${displayName}WillDismiss`, [displayName]);
  const willPresentEventName = useMemo(() => `on${displayName}WillPresent`, [displayName]);
  const [isOpen, setIsOpen] = useState(false);
  const ionContext = useContext(IonContext);
  const [overlayId] = useState(generateId('overlay'));

  defineCustomElement();

  useEffect(() => {
    if (isOpen && component && containerElRef.current) {
      if (React.isValidElement(component)) {
        ionContext.addOverlay(overlayId, component, containerElRef.current!);
      } else {
        const element = createElement(component as React.ComponentClass, componentProps);
        ionContext.addOverlay(overlayId, element, containerElRef.current!);
      }
    }
  }, [component, containerElRef.current, isOpen, componentProps]);

  const present = useCallback(async (options: OptionsType & HookOverlayOptions) => {
    if (overlayRef.current) {
      return;
    }

    const { onDidDismiss, onWillDismiss, onDidPresent, onWillPresent, ...rest } = options;

    if (typeof document !== 'undefined') {
      containerElRef.current = document.createElement('div');
    }

    overlayRef.current = await controller.create({
      ...(rest as any),
      component: containerElRef.current,
    });

    attachProps(overlayRef.current, {
      [didDismissEventName]: handleDismiss,
      [didPresentEventName]: (e: CustomEvent) => onDidPresent && onDidPresent(e),
      [willDismissEventName]: (e: CustomEvent) => onWillDismiss && onWillDismiss(e),
      [willPresentEventName]: (e: CustomEvent) => onWillPresent && onWillPresent(e),
    });

    overlayRef.current.present();

    setIsOpen(true);

    function handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {