Frame() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ Frame() — react Function Reference

Dependency Diagram

graph TD
  c3332b95_6756_9d84_08a4_21287ba10f74["Frame()"]
  17456f08_e914_e516_fd93_bcba59546deb["index.js"]
  c3332b95_6756_9d84_08a4_21287ba10f74 -->|defined in| 17456f08_e914_e516_fd93_bcba59546deb
  style c3332b95_6756_9d84_08a4_21287ba10f74 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/app/Iframe/index.js lines 23–63

function Frame(props) {
  const [element, setElement] = React.useState(null);

  const ref = React.useRef();

  React.useLayoutEffect(function () {
    const iframe = ref.current;

    if (iframe) {
      const html = `
    <!DOCTYPE html>
    <html>
    <body>
      <div id="root"></div>
    </body>
    </html>
    `;

      const document = iframe.contentDocument;

      document.open();
      document.write(html);
      document.close();

      setElement(document.getElementById('root'));
    }
  }, []);

  return (
    <Fragment>
      <iframe title="Test Iframe" ref={ref} style={iframeStyle} />
      <iframe
        title="Secured Iframe"
        src="https://example.com"
        style={iframeStyle}
      />

      {element ? createPortal(props.children, element) : null}
    </Fragment>
  );
}