Toggle() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ Toggle() — react Function Reference

Dependency Diagram

graph TD
  ad68b45d_879b_b053_fa18_da49ca05b77a["Toggle()"]
  61c0d244_ab84_2e1a_7b19_996aebeb6c63["Toggle.js"]
  ad68b45d_879b_b053_fa18_da49ca05b77a -->|defined in| 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  style ad68b45d_879b_b053_fa18_da49ca05b77a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Toggle.js lines 27–67

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;
}