# useToggle

> Boolean state with toggle and explicit set.

- Category: State
- Package: `hookli` (install with `npm i hookli`)
- Docs: https://hookli.vercel.app/docs/use-toggle

## Signature

```ts
useToggle(initialValue?: boolean): [boolean, () => void, (value: boolean) => void]
```

## Parameters

- `initialValue`: `boolean` (default: `false`) — The value the toggle starts from.

## Returns

- `[0] value`: `boolean` — The current boolean state.
- `[1] toggle`: `() => void` — Flips the value.
- `[2] setValue`: `(value: boolean) => void` — Sets the value explicitly.

## Usage

```tsx
import { useToggle } from "hookli";

export function Demo() {
  const [on, toggle, setOn] = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>{on ? "On" : "Off"}</button>
      <button onClick={() => setOn(true)}>Set on</button>
      <button onClick={() => setOn(false)}>Set off</button>
    </div>
  );
}
```

## Source

`src/hooks/useToggle.hook.ts`

```ts
import { useCallback, useState } from "react";

export const useToggle = (
  initialValue = false,
): [boolean, () => void, (value: boolean) => void] => {
  const [state, setState] = useState(initialValue);

  const toggle = useCallback(() => {
    setState((prevState) => !prevState);
  }, []);

  const setExplicit = useCallback((value: boolean) => {
    setState(value);
  }, []);

  return [state, toggle, setExplicit];
};
```