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

InspectedElementStyleXPlugin() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

Dependency Diagram

graph TD
  ea53c8b1_18bb_14c3_c4f3_ef35fe9d8b74["InspectedElementStyleXPlugin()"]
  9ec8fdcf_1944_ffb8_5f23_12eaf9528535["InspectedElementStyleXPlugin.js"]
  ea53c8b1_18bb_14c3_c4f3_ef35fe9d8b74 -->|defined in| 9ec8fdcf_1944_ffb8_5f23_12eaf9528535
  style ea53c8b1_18bb_14c3_c4f3_ef35fe9d8b74 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js lines 28–76

export default function InspectedElementStyleXPlugin({
  bridge,
  element,
  inspectedElement,
  store,
}: Props): React.Node {
  if (!enableStyleXFeatures) {
    return null;
  }

  const styleXPlugin = inspectedElement.plugins.stylex;
  if (styleXPlugin == null) {
    return null;
  }

  const {resolvedStyles, sources} = styleXPlugin;

  return (
    <div>
      <div className={sharedStyles.HeaderRow}>
        <div className={sharedStyles.Header}>stylex</div>
      </div>
      {sources.map(source => (
        <div key={source} className={styles.Source}>
          {source}
        </div>
      ))}
      {Object.entries(resolvedStyles).map(([name, value]) => (
        <KeyValue
          key={name}
          alphaSort={true}
          bridge={bridge}
          canDeletePaths={false}
          canEditValues={false}
          canRenamePaths={false}
          depth={1}
          element={element}
          hidden={false}
          inspectedElement={inspectedElement}
          name={name}
          path={[name]}
          pathRoot="stylex"
          store={store}
          value={value}
        />
      ))}
    </div>
  );
}

Domain

Subdomains

Defined In

Source

Frequently Asked Questions

What does InspectedElementStyleXPlugin() do?
InspectedElementStyleXPlugin() is a function in the react codebase, defined in packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js.
Where is InspectedElementStyleXPlugin() defined?
InspectedElementStyleXPlugin() is defined in packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js at line 28.

Analyze Your Own Codebase

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

Try Supermodel Free