useBoolean Tested

cURL wget

A hook that allows to manage a boolean value.

Example

Demo Code

import clsx from "clsx";
import useBoolean from "@/hooks/useBoolean";

export default function UseBooleanExample() {
  const { value, setTrue, setFalse, toggle } = useBoolean(false);

  return (
    <div>
      <div className="text-ctp-text">
        The value is &nbsp;
        <span
          className={clsx(
            "rounded p-2 text-ctp-base",
            value ? "bg-ctp-green" : "bg-ctp-red",
          )}
        >
          {value ? "true" : "false"}
        </span>
      </div>
      <div className="mt-6 flex gap-2">
        <button
          onClick={setTrue}
          className="rounded bg-ctp-green px-4 py-2 text-ctp-base"
        >
          Set to true
        </button>
        <button
          onClick={setFalse}
          className="rounded bg-ctp-red px-4 py-2 text-ctp-base"
        >
          Set to false
        </button>
        <button
          onClick={toggle}
          className="rounded bg-ctp-text px-4 py-2 text-ctp-base"
        >
          Toggle
        </button>
      </div>
    </div>
  );
}

Code

import { useCallback, useState } from "react";

import type { Dispatch, SetStateAction } from "react";

type UseBooleanReturn = {
  value: boolean;
  setValue: Dispatch<SetStateAction<boolean>>;
  setTrue: () => void;
  setFalse: () => void;
  toggle: () => void;
};

/**
 * A hook that allows to manage a boolean value.
 * @param {boolean} defaultValue - The initial value of the boolean.
 * @returns {UseBooleanReturn} An object with the following properties:
 * 1. value - The current value of the boolean.
 * 2. setValue - A function to set the value.
 * 3. setTrue - A function to set the value to true.
 * 4. setFalse - A function to set the value to false.
 * 5. toggle - A function to toggle the value.
 */
export default function useBoolean(defaultValue?: boolean): UseBooleanReturn {
  if (typeof defaultValue !== "boolean") {
    throw new Error("defaultValue must be `true` or `false`");
  }
  const [value, setValue] = useState(defaultValue);

  const setTrue = useCallback(() => {
    setValue(true);
  }, []);

  const setFalse = useCallback(() => {
    setValue(false);
  }, []);

  const toggle = useCallback(() => {
    setValue((x) => !x);
  }, []);

  return { value, setValue, setTrue, setFalse, toggle };
}

Tests

import useBoolean from "@/hooks/useBoolean";
import { renderHook, act, cleanup } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";

describe("useBoolean", () => {
  afterEach(() => {
    cleanup();
  });

  it("should initialize with the default value", () => {
    const { result } = renderHook(() => useBoolean(true));
    expect(result.current.value).toBe(true);
  });

  it("should set the value using setValue", () => {
    const { result } = renderHook(() => useBoolean(false));
    act(() => {
      result.current.setValue(true);
    });
    expect(result.current.value).toBe(true);
  });

  it("should set the value to true using setTrue", () => {
    const { result } = renderHook(() => useBoolean(false));
    act(() => {
      result.current.setTrue();
    });
    expect(result.current.value).toBe(true);
  });

  it("should set the value to false using setFalse", () => {
    const { result } = renderHook(() => useBoolean(true));
    act(() => {
      result.current.setFalse();
    });
    expect(result.current.value).toBe(false);
  });

  it("should toggle the value using toggle", () => {
    const { result } = renderHook(() => useBoolean(true));
    act(() => {
      result.current.toggle();
    });
    expect(result.current.value).toBe(false);
    act(() => {
      result.current.toggle();
    });
    expect(result.current.value).toBe(true);
  });
});