React portal component #reactjs #react #portal #hooks

Portal.jsx

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const portalTarget = document.getElementById('portal');

const Portal = ({ children }) => {
  const element = document.createElement('div');

  useEffect(() => {
    portalTarget.appendChild(element);

    return () => portalTarget.removeChild(element);
  });

  return ReactDOM.createPortal(children, element);
};

export default Portal;