React portal example

react-portal.tsx

import { useLayoutEffect, useRef } from "react";
import { createPortal } from "react-dom";

const createPortalComponent = (el: HTMLElement) => ({ children }) => {
  const ref = useRef<HTMLElement>(document.createElement("div"));

  useLayoutEffect(() => {
    el.appendChild(ref.current);
    return () => el.removeChild(ref.current);
  }, []);

  return createPortal(children, ref.current);
};

export const ExamplePortal = createPortalComponent(
  document.querySelector("#example-portal")
);