useToggle

A Hook for toggling between two values, more convenient and semantic than useState.

Basic Usage

Live Editor

function Demo() {
  const [value, toggle] = useToggle('blue', ['blue', 'orange']);

  return (
    <div>
      <Button onClick={() => toggle()}>
        Toggle Color
      </Button>
      <div
        style={{
          marginTop: '20px',
          padding: '40px',
          backgroundColor: value,
          color: 'white',
          borderRadius: '8px',
          textAlign: 'center',
          fontWeight: 'bold',
        }}
      >
        Current color: {value}
      </div>
    </div>
  );
}

Result

Loading...

Set Specific Value

Can directly set to a specific value:

Live Editor

function Demo() {
  const [value, toggle] = useToggle('left', ['left', 'center', 'right']);

  return (
    <div>
      <Group spacing="md">
        <Button onClick={() => toggle('left')}>Align Left</Button>
        <Button onClick={() => toggle('center')}>Align Center</Button>
        <Button onClick={() => toggle('right')}>Align Right</Button>
        <Button onClick={() => toggle()}>Toggle</Button>
      </Group>
      <div style={{ marginTop: '20px', textAlign: value }}>
        Current alignment: <strong>{value}</strong>
      </div>
    </div>
  );
}

Result

Loading...

Boolean Toggle

useBooleanToggle is specifically provided for boolean value toggling:

Live Editor

function Demo() {
  const [isActive, toggle] = useBooleanToggle(false);

  return (
    <div>
      <Button onClick={() => toggle()}>Toggle State</Button>
      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: isActive ? 'var(--ifm-color-success-lightest)' : 'var(--ifm-color-emphasis-100)',
          borderRadius: '8px',
          border: `1px solid ${isActive ? 'var(--ifm-color-success)' : 'var(--ifm-color-emphasis-300)'}`,
        }}
      >
        Status: {isActive ? '✓ Active' : '✗ Inactive'}
      </div>
    </div>
  );
}

Result

Loading...

Theme Toggle Example

Live Editor

function Demo() {
  const [theme, toggleTheme] = useToggle('light', ['light', 'dark']);

  return (
    <div>
      <Button onClick={() => toggleTheme()}>Toggle Theme</Button>
      <div
        style={{
          marginTop: '20px',
          padding: '30px',
          backgroundColor: theme === 'light' ? '#ffffff' : '#1a1a1a',
          color: theme === 'light' ? '#000000' : '#ffffff',
          borderRadius: '8px',
          border: `1px solid ${theme === 'light' ? '#e0e0e0' : '#333333'}`,
          transition: 'all 0.3s',
        }}
      >
        <h4>Current theme: {theme}</h4>
        <p>This is {theme === 'light' ? 'light' : 'dark'} theme mode</p>
      </div>
    </div>
  );
}

Result

Loading...

API

useToggle

function useToggle<T>(
  initialValue: T,
  options: [T, T]
): [T, (value?: React.SetStateAction<T>) => void]

Parameters

Parameter	Description	Type	Default
initialValue	Initial value	T	-
options	Two values to toggle between	[T, T]	-

Return Value

Returns an array containing the current value and toggle function:

Index	Description	Type
[0]	Current value	T
[1]	Toggle function	(value?: React.SetStateAction<T>) => void

useBooleanToggle

function useBooleanToggle(
  initialValue?: boolean
): [boolean, (value?: React.SetStateAction<boolean>) => void]

Parameters

Parameter	Description	Type	Default
initialValue	Initial boolean value	boolean	false

Return Value

Returns an array containing the current boolean value and toggle function.

Usage Scenarios

• Theme Toggle: Light/dark theme switching
• View Mode: List/grid view toggle
• Language Switch: English/Chinese language toggle
• State Toggle: Enable/disable state toggle
• Alignment: Left/right alignment toggle