use-toggle (use-toggle)

Controls a boolean state with a toggle function.

v0.1.0

Usage

import { use-toggle } from "@/hooks"

"use client";

import React from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { useToggle } from "@/components/hooks/use-toggle";

export function UseToggleDemo() {
  const [isOn, toggle] = useToggle(false);

  return (
    <Card className="relative max-w-sm w-full">
      <CardHeader>
        <CardTitle>useToggle</CardTitle>
        <CardDescription>
          This component uses the <code>useToggle</code> hook to toggle a
          boolean state.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          The state is: <strong>{isOn ? "On" : "Off"}</strong>
        </p>
      </CardContent>
      <CardFooter>
        <Button onClick={toggle}>Toggle</Button>
      </CardFooter>
    </Card>
  );
}

Install

npx wkkkis-hooks add use-toggle

Returns — Properties

Name	Type	Default	Description
The hook returns a tuple	—	—	[value, toggle] .
value	—	—	is the current boolean state.
toggle	—	—	is a function that toggles the state between true and false .

onToggle Callback

The onToggle callback is called every time the state changes, with the new value as its argument.
The callback is called after the state is updated.

Returned Values

The hook returns a tuple: [value, toggle] .
value is the current boolean state.
toggle is a function that toggles the state between true and false .

Initial Value

The initialValue prop sets the initial state (defaults to false ).

Best Practices & Caveats

The hook is designed for toggling boolean state in React components.
For best performance, memoize the onToggle callback if it depends on other values.
The hook is client-side only.

Files in this hook

Source	Destination
files/use-toggle.ts	src/hooks/use-toggle.ts