react Architecture Docs
Home / File/ Toggle.js — react Source File

Toggle.js — react Source File

Architecture documentation for Toggle.js, a javascript file in the react codebase. 3 imports, 7 dependents.

File javascript BabelCompiler Validation 3 imports 7 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  61c0d244_ab84_2e1a_7b19_996aebeb6c63["Toggle.js"]
  2151ee14_d7f6_23a9_9f2a_fd64a504f25b["Toggle.css"]
  61c0d244_ab84_2e1a_7b19_996aebeb6c63 --> 2151ee14_d7f6_23a9_9f2a_fd64a504f25b
  bb73063d_5d08_efb3_036e_72b78842d689["tooltip.js"]
  61c0d244_ab84_2e1a_7b19_996aebeb6c63 --> bb73063d_5d08_efb3_036e_72b78842d689
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  61c0d244_ab84_2e1a_7b19_996aebeb6c63 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  c4e436c2_f97f_ce14_4047_a3741d53d2b6["InspectHostNodesToggle.js"]
  c4e436c2_f97f_ce14_4047_a3741d53d2b6 --> 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  4c0d725a_27bd_a723_3599_a3e75bea5bd3["InspectedElement.js"]
  4c0d725a_27bd_a723_3599_a3e75bea5bd3 --> 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3["InspectedElementHooksTree.js"]
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3 --> 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  4e5b4a1f_694c_f426_36e2_a03da99b38d5["OwnersStack.js"]
  4e5b4a1f_694c_f426_36e2_a03da99b38d5 --> 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  42ca8057_28d2_de34_4629_6b91b57e8269["HookChangeSummary.js"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  20b264a9_e519_d0f6_5613_b33869edcdbd["ComponentsSettings.js"]
  20b264a9_e519_d0f6_5613_b33869edcdbd --> 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  3249b7c1_ae10_2672_10ce_a66fd0ee6f60["SuspenseTab.js"]
  3249b7c1_ae10_2672_10ce_a66fd0ee6f60 --> 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  style 61c0d244_ab84_2e1a_7b19_996aebeb6c63 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useCallback} from 'react';

import styles from './Toggle.css';
import Tooltip from './Components/reach-ui/tooltip';

type Props = {
  children: React$Node,
  className?: string,
  isChecked: boolean,
  isDisabled?: boolean,
  onChange: (isChecked: boolean) => void,
  testName?: ?string,
  title?: string,
  ...
};

export default function Toggle({
  children,
  className = '',
  isDisabled = false,
  isChecked,
  onChange,
  testName,
  title,
}: Props): React.Node {
  let defaultClassName;
  if (isDisabled) {
    defaultClassName = styles.ToggleDisabled;
  } else if (isChecked) {
    defaultClassName = styles.ToggleOn;
  } else {
    defaultClassName = styles.ToggleOff;
  }

  const handleClick = useCallback(
    () => onChange(!isChecked),
    [isChecked, onChange],
  );

  let toggle = (
    <button
      className={`${defaultClassName} ${className}`}
      data-testname={testName}
      disabled={isDisabled}
      onClick={handleClick}>
      <span className={styles.ToggleContent} tabIndex={-1}>
        {children}
      </span>
    </button>
  );

  if (title) {
    toggle = <Tooltip label={title}>{toggle}</Tooltip>;
  }

  return toggle;
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does Toggle.js do?
Toggle.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in Toggle.js?
Toggle.js defines 2 function(s): Toggle, type.onChange.
What does Toggle.js depend on?
Toggle.js imports 3 module(s): Toggle.css, react, tooltip.js.
What files import Toggle.js?
Toggle.js is imported by 7 file(s): ComponentsSettings.js, HookChangeSummary.js, InspectHostNodesToggle.js, InspectedElement.js, InspectedElementHooksTree.js, OwnersStack.js, SuspenseTab.js.
Where is Toggle.js in the architecture?
Toggle.js is located at packages/react-devtools-shared/src/devtools/views/Toggle.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views).

Analyze Your Own Codebase

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

Try Supermodel Free