- 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>