useToggle

優雅管理 Boolean 值。

useToggle 在兩個值之間切換（預設為 true 和 false）。它回傳一個元組，包含當前值和切換函式。可以自訂切換的兩個值，不限於布林值。

使用場景

• 在兩個預定義值之間切換（例如 "grid" 和 "list" 視圖模式）
• 實作簡單的開/關切換功能
• 管理二元狀態，如排序方向（升序/降序）

注意事項

• 自訂值：支援任何兩個值之間的切換，不僅限於布林值。
• 直接設定：切換函式也接受參數以直接設定特定值。
• 相關 hooks：另請參閱 useBoolean 用於帶有 setTrue/setFalse 的布林管理，以及 useCycleList 用於在多個值之間循環。

Usage

function Demo() {
  const [on, toggle] = useToggle(true);

  return (
    <div>
      <div>{on ? "ON" : "OFF"}</div>
      <button onClick={toggle}>切換</button>
      <button onClick={() => toggle(true)}>設置為開啟</button>
      <button onClick={() => toggle(false)}>設置為關閉</button>
    </div>
  );
};

API

useToggle

Returns

[boolean, (nextValue?: any) => void]: 包含以下元素的元組：

• 布林狀態的當前值。
• 切換布林狀態值的函數。

Arguments