constructor() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 2

Entity Profile

BabelCompiler→ Validation→ constructor() — react Function Reference

Dependency Diagram

graph TD
  398fbed3_a71d_efb3_1425_8c5f9e4bcf83["constructor()"]
  c07ce908_6e01_63cf_eb0b_03f500e4af54["OverlayRect"]
  398fbed3_a71d_efb3_1425_8c5f9e4bcf83 -->|defined in| c07ce908_6e01_63cf_eb0b_03f500e4af54
  c2019f0a_3ee0_14a2_1ebd_537aa80bb999["constructor()"]
  c2019f0a_3ee0_14a2_1ebd_537aa80bb999 -->|calls| 398fbed3_a71d_efb3_1425_8c5f9e4bcf83
  2aefb676_663c_c1e6_d265_8493cbc5b1ae["constructor()"]
  2aefb676_663c_c1e6_d265_8493cbc5b1ae -->|calls| 398fbed3_a71d_efb3_1425_8c5f9e4bcf83
  c2019f0a_3ee0_14a2_1ebd_537aa80bb999["constructor()"]
  398fbed3_a71d_efb3_1425_8c5f9e4bcf83 -->|calls| c2019f0a_3ee0_14a2_1ebd_537aa80bb999
  style 398fbed3_a71d_efb3_1425_8c5f9e4bcf83 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js lines 29–51

  constructor(doc: Document, container: HTMLElement) {
    this.node = doc.createElement('div');
    this.border = doc.createElement('div');
    this.padding = doc.createElement('div');
    this.content = doc.createElement('div');

    this.border.style.borderColor = overlayStyles.border;
    this.padding.style.borderColor = overlayStyles.padding;
    this.content.style.backgroundColor = overlayStyles.background;

    assign(this.node.style, {
      borderColor: overlayStyles.margin,
      pointerEvents: 'none',
      position: 'fixed',
    });

    this.node.style.zIndex = '10000000';

    this.node.appendChild(this.border);
    this.border.appendChild(this.padding);
    this.padding.appendChild(this.content);
    container.appendChild(this.node);
  }