split-gate.tsx

import * as React from 'react';
import { useMemo, useContext, createContext, ReactNode } from 'react';
import { createPortal } from 'react-dom';

type Context = { portalID: string };
const PortalContext = createContext<Context>({} as any);

export function createSplitGate<T>(render: (arg: T) => ReactNode) {
  return {
    Zone: (props: Context & { children: ReactNode }) => {
      const { children, ...ctxValues } = props;
      return <PortalContext.Provider value={ctxValues}>{children}</PortalContext.Provider>;
    },

    ExitGate() {
      const { portalID } = useContext(PortalContext);
      return <div id={portalID} />;
    },

    EnterGate(props: { arg: T }) {
      const { portalID } = useContext(PortalContext);
      const mountTarget = document.getElementById(portalID);
      return useMemo(() => {
        if (!mountTarget) {
          return null;
        }
        return createPortal(render(props.arg), mountTarget);
      }, [props.arg, mountTarget]);
    }
  };
}