rootPortal.tsx

TLDR

The rootPortal.tsx file defines a React component called RootPortal which creates a portal for rendering components outside of the component hierarchy. It uses the ReactDOM.createPortal method to create the portal.

Methods

N/A

Classes

N/A

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React, {useState, useLayoutEffect} from 'react'
import ReactDOM from 'react-dom'

type Props = {
    children: React.ReactNode
}

const RootPortal = (props: Props): JSX.Element => {
    const [el] = useState(document.createElement('div'))
    const rootPortal = document.getElementById('focalboard-root-portal')

    useLayoutEffect(() => {
        if (rootPortal) {
            rootPortal.appendChild(el)
        }
        return () => {
            if (rootPortal) {
                rootPortal.removeChild(el)
            }
        }
    }, [])

    return ReactDOM.createPortal(props.children, el)  // eslint-disable-line
}

export default React.memo(RootPortal)