import React , { FC , useContext , useEffect , useMemo } from 'react' ; import { createPortalNode , InPortal } from 'react-reverse-portal' ; import { MlPageControlsContext } from '../ml_page/ml_page' ; export const MlPageHeader = ( { children } ) => { const { setPageTitle } = useContext ( MlPageControlsContext ) ; const portalNode = useMemo ( ( ) => createPortalNode ( ) , [ ] ) ; useEffect ( ( ) => { setPageTitle ( children ) ; return ( ) => { portalNode . unmount ( ) ; setPageTitle ( undefined ) ; } ; } , [ portalNode , setPageTitle ] ) ; return < InPortal node = { portalNode } > { children } < /InPortal>; } ;