react Architecture Docs
Home / Function/ LayoutViewer() — react Function Reference

LayoutViewer() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

Dependency Diagram

graph TD
  30857089_6b5e_f18c_6f47_4358eec5d021["LayoutViewer()"]
  a2ae9415_2ed8_24e4_884e_2e4fd020acbe["LayoutViewer.js"]
  30857089_6b5e_f18c_6f47_4358eec5d021 -->|defined in| a2ae9415_2ed8_24e4_884e_2e4fd020acbe
  c2a405d9_69d8_f17f_ae04_ade6ca161e82["format()"]
  30857089_6b5e_f18c_6f47_4358eec5d021 -->|calls| c2a405d9_69d8_f17f_ae04_ade6ca161e82
  style 30857089_6b5e_f18c_6f47_4358eec5d021 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js lines 20–63

export default function LayoutViewer({id, layout}: Props): React.Node {
  const {height, margin, padding, y, width, x} = layout;

  return (
    <div className={styles.LayoutViewer}>
      <div className={styles.Header}>layout</div>
      <div className={styles.DashedBox}>
        <div className={styles.LabelRow}>
          <label className={styles.Label}>margin</label>

          <label>{margin.top || '-'}</label>
        </div>

        <div className={styles.BoxRow}>
          <label>{margin.left || '-'}</label>

          <div className={styles.SolidBox}>
            <div className={styles.LabelRow}>
              <label className={styles.Label}>padding</label>

              <label>{padding.top || '-'}</label>
            </div>

            <div className={styles.BoxRow}>
              <label>{padding.left || '-'}</label>

              <div className={styles.DashedBox}>
                <div className={styles.LabelRow}>
                  {format(width)} x {format(height)} ({format(x)}, {format(y)})
                </div>
              </div>

              <label>{padding.right || '-'}</label>
            </div>

            <label>{padding.bottom || '-'}</label>
          </div>
          <label>{margin.right || '-'}</label>
        </div>
        <label>{margin.bottom || '-'}</label>
      </div>
    </div>
  );
}

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does LayoutViewer() do?
LayoutViewer() is a function in the react codebase, defined in packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js.
Where is LayoutViewer() defined?
LayoutViewer() is defined in packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js at line 20.
What does LayoutViewer() call?
LayoutViewer() calls 1 function(s): format.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free