NextJS Portal Template

portal.tsx

import React, { Fragment, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

const Portal: React.FC<{ selector: string }> = ({ children, selector }) => {
    const [mounted, setMounted] = useState<boolean>(false);

    useEffect(() => {
        setMounted(true);
        return () => setMounted(false);
    }, [selector]);

    if (mounted) return createPortal(children, document.querySelector(selector));

    return <Fragment />;
};

export default Portal;