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

ToggleInspectedElement() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

Dependency Diagram

graph TD
  3a7e3457_eef7_ea7c_0dc1_3095bbd393b7["ToggleInspectedElement()"]
  3249b7c1_ae10_2672_10ce_a66fd0ee6f60["SuspenseTab.js"]
  3a7e3457_eef7_ea7c_0dc1_3095bbd393b7 -->|defined in| 3249b7c1_ae10_2672_10ce_a66fd0ee6f60
  style 3a7e3457_eef7_ea7c_0dc1_3095bbd393b7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js lines 124–161

function ToggleInspectedElement({
  dispatch,
  state,
  orientation,
}: {
  dispatch: LayoutDispatch,
  state: LayoutState,
  orientation: 'horizontal' | 'vertical',
}) {
  let iconType: IconType;
  if (orientation === 'horizontal') {
    iconType = state.inspectedElementHidden
      ? 'panel-right-open'
      : 'panel-right-close';
  } else {
    iconType = state.inspectedElementHidden
      ? 'panel-bottom-open'
      : 'panel-bottom-close';
  }
  return (
    <Button
      className={styles.ToggleInspectedElement}
      data-orientation={orientation}
      onClick={() =>
        dispatch({
          type: 'ACTION_SET_INSPECTED_ELEMENT_TOGGLE',
          payload: null,
        })
      }
      title={
        state.inspectedElementHidden
          ? 'Show Inspected Element'
          : 'Hide Inspected Element'
      }>
      <ButtonIcon type={iconType} />
    </Button>
  );
}

Domain

Subdomains

Defined In

Source

Frequently Asked Questions

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

Analyze Your Own Codebase

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

Try Supermodel Free