useToggle

在两个值之间切换的 Hook，比 useState 更加便捷和语义化。

基本用法

实时编辑器

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

  return (
    <div>
      <Button onClick={() => toggle()}>
        切换颜色
      </Button>
      <div
        style={{
          marginTop: '20px',
          padding: '40px',
          backgroundColor: value,
          color: 'white',
          borderRadius: '8px',
          textAlign: 'center',
          fontWeight: 'bold',
        }}
      >
        当前颜色: {value}
      </div>
    </div>
  );
}

结果

Loading...

设置特定值

可以直接设置为特定的值：

实时编辑器

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

  return (
    <div>
      <Group spacing="md">
        <Button onClick={() => toggle('left')}>左对齐</Button>
        <Button onClick={() => toggle('center')}>居中对齐</Button>
        <Button onClick={() => toggle('right')}>右对齐</Button>
        <Button onClick={() => toggle()}>切换</Button>
      </Group>
      <div style={{ marginTop: '20px', textAlign: value }}>
        当前对齐方式: <strong>{value}</strong>
      </div>
    </div>
  );
}

结果

Loading...

布尔值切换

提供了 useBooleanToggle 专门用于布尔值切换：

实时编辑器

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

  return (
    <div>
      <Button onClick={() => toggle()}>切换状态</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)'}`,
        }}
      >
        状态: {isActive ? '✓ 激活' : '✗ 未激活'}
      </div>
    </div>
  );
}

结果

Loading...

主题切换示例

实时编辑器

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

  return (
    <div>
      <Button onClick={() => toggleTheme()}>切换主题</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>当前主题: {theme}</h4>
        <p>这是 {theme === 'light' ? '亮色' : '暗色'} 主题模式</p>
      </div>
    </div>
  );
}

结果

Loading...

API

useToggle

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

参数

参数	说明	类型	默认值
initialValue	初始值	T	-
options	可切换的两个值	[T, T]	-

返回值

返回一个数组，包含当前值和切换函数：

索引	说明	类型
[0]	当前值	T
[1]	切换函数	(value?: React.SetStateAction<T>) => void

useBooleanToggle

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

参数

参数	说明	类型	默认值
initialValue	初始布尔值	boolean	false

返回值

返回一个数组，包含当前布尔值和切换函数。

使用场景

• 主题切换: 亮色/暗色主题切换
• 视图模式: 列表/网格视图切换
• 语言切换: 中文/英文语言切换
• 状态切换: 启用/禁用状态切换
• 对齐方式: 左/右对齐切换