InnerElementType() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ InnerElementType() — react Function Reference

Dependency Diagram

graph TD
  ae177039_68b9_44c9_55c6_3acbeb14bee6["InnerElementType()"]
  80ad5569_a221_98e5_daec_ede1bea33ee0["Tree.js"]
  ae177039_68b9_44c9_55c6_3acbeb14bee6 -->|defined in| 80ad5569_a221_98e5_daec_ede1bea33ee0
  8e17a924_5c80_54a2_af29_cc1a3ea74797["calculateElementOffset()"]
  ae177039_68b9_44c9_55c6_3acbeb14bee6 -->|calls| 8e17a924_5c80_54a2_af29_cc1a3ea74797
  style ae177039_68b9_44c9_55c6_3acbeb14bee6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/Tree.js lines 551–566

function InnerElementType({children, style}) {
  const store = useContext(StoreContext);

  const {height} = style;
  const maxDepth = store.getMaximumRecordedDepth();
  // Maximum possible indentation plus some arbitrary offset for the node content.
  const width = calculateElementOffset(maxDepth) + 500;

  return (
    <div className={styles.InnerElementType} style={{height, width}}>
      {children}

      <VerticalDelimiter />
    </div>
  );
}