Published on

React Higher Order Component

Boilerplate code for creating a simple React HOC that wraps another component and adds some functionality to it.
HigherOrderComponent.tsx
import { useRef, useEffect, useState } from "react";
import { createPortal } from "react-dom";

function HOC({
  children,
  selector,
}: {
  children: React.ReactChild;
  selector: string;
}) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, [selector]);

  return mounted
    ? createPortal(children, document.querySelector(selector)!)
    : null;
}

export default HOC;

Usage

index.tsx
<HOC selector="#modal">
  <SimpleSideModal show={show} close={Toggle} />
</HOC>