useBoolean

管理布爾值的 React hook。

useBoolean 管理一個布林值狀態，提供便捷的 toggle、setTrue 和 setFalse 操作函式。它是 useState(false) 加上常用切換操作的語義化封裝。

使用場景

  • 管理開關狀態（例如模態框開啟/關閉、功能啟用/停用）
  • 控制 UI 元素的顯示/隱藏狀態
  • 實作簡單的開關邏輯而無需手動寫切換函式

注意事項

  • 簡潔 API：提供 toggle()、setTrue() 和 setFalse() 三個操作函式，比手動 setState(prev => !prev) 更加語義化。
  • 初始值：接受一個可選的初始值參數（預設：false）。
  • 相關 hooks：另請參閱 useToggle 用於更通用的雙值切換，以及 useDisclosure 用於管理帶有回呼的開啟/關閉狀態。

Usage

Live Editor
function Demo() {
  const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false);

  return (
    <div>
      <p>當前值: <strong>{value ? '真' : '假'}</strong></p>
      <div style={{ marginBottom: 16 }}>
        <button
          type="button"
          onClick={() => setValue(true)}
          style={{ marginRight: 8 }}
          disabled={value}
        >
          設置為真
        </button>
        <button
          type="button"
          onClick={() => setValue(false)}
          style={{ marginRight: 8 }}
          disabled={!value}
        >
          設置為假
        </button>
        <button
          type="button"
          onClick={setTrue}
          style={{ marginRight: 8 }}
          disabled={value}
        >
          setTrue()
        </button>
        <button
          type="button"
          onClick={setFalse}
          style={{ marginRight: 8 }}
          disabled={!value}
        >
          setFalse()
        </button>
        <button
          type="button"
          onClick={toggle}
          style={{ marginRight: 8 }}
        >
          切換
        </button>
      </div>
      <div>
        <p>狀態: {value ? '✅ 啟用' : '❌ 禁用'}</p>
      </div>
    </div>
  );
};
Result

API

useBoolean

Returns

{ readonly value: boolean; readonly setValue: (value: boolean) => void; readonly setTrue: () => void; readonly setFalse: () => void; readonly toggle: () => void; }: 包含以下屬性的物件：

  • value: 當前的布林值。
  • setValue: 直接設定布林值的函數。
  • setTrue: 將值設定為 true 的函數。
  • setFalse: 將值設定為 false 的函數。
  • toggle: 切換布林值的函數。

Arguments

參數名描述類型預設值
initialValue初始值，默认为 falseboolean | undefined-