portaledContent() — react Function Reference

Architecture documentation for the portaledContent() function in portaledContent.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ portaledContent() — react Function Reference

Dependency Diagram

graph TD
  99e412e8_4291_b219_15f8_f660472850c6["portaledContent()"]
  112f19f5_c561_f36f_4f9c_12048819ad24["portaledContent.js"]
  99e412e8_4291_b219_15f8_f660472850c6 -->|defined in| 112f19f5_c561_f36f_4f9c_12048819ad24
  style 99e412e8_4291_b219_15f8_f660472850c6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/portaledContent.js lines 19–55

export default function portaledContent(
  Component: component(...props: any),
): component(...props: any) {
  return function PortaledContent({portalContainer, ...rest}: Props) {
    const store = useContext(StoreContext);

    let children = (
      <ErrorBoundary store={store}>
        <Component {...rest} />
      </ErrorBoundary>
    );

    if (portalContainer != null) {
      // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
      // Because Portals render in a different DOM subtree, these variables don't propagate.
      // So in this case, we need to re-wrap portaled content in a second ThemeProvider.
      children = (
        <ThemeProvider>
          <div
            data-react-devtools-portal-root={true}
            style={{
              width: '100vw',
              height: '100vh',
              containerName: 'devtools',
              containerType: 'inline-size',
            }}>
            {children}
          </div>
        </ThemeProvider>
      );
    }

    return portalContainer != null
      ? createPortal(children, portalContainer)
      : children;
  };
}