ThemeToggleButton() — react Function Reference

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

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ ThemeToggleButton() — react Function Reference

Dependency Diagram

graph TD
  8abd26b3_129e_ecc2_7604_352ae8dfed78["ThemeToggleButton()"]
  c549fdb2_d55e_4878_6475_8654256c52bf["Theme.js"]
  8abd26b3_129e_ecc2_7604_352ae8dfed78 -->|defined in| c549fdb2_d55e_4878_6475_8654256c52bf
  style 8abd26b3_129e_ecc2_7604_352ae8dfed78 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/ssr/src/components/Theme.js lines 7–25

export function ThemeToggleButton({onChange}) {
  let theme = useContext(Theme);
  let [targetTheme, setTargetTheme] = useState(theme);
  function toggleTheme() {
    let newTheme = theme === 'light' ? 'dark' : 'light';
    // High pri, responsive update.
    setTargetTheme(newTheme);
    // Perform the actual theme change in a separate update.
    setTimeout(() => onChange(newTheme), 0);
  }
  if (targetTheme !== theme) {
    return 'Switching to ' + targetTheme + '...';
  }
  return (
    <a className="link" onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'Dark' : 'Light'} theme
    </a>
  );
}