State

useBoolean

Boolean state with setTrue, setFalse, toggle and set.

Demo

live · imported from hookli

value: false

import { useBoolean } from "hookli";

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

  return (
    <div>
      <p>{value ? "On" : "Off"}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={setTrue}>On</button>
      <button onClick={setFalse}>Off</button>
    </div>
  );
}

Usage

use-boolean.tsxtsx

import { useBoolean } from "hookli";

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

  return (
    <div>
      <p>{value ? "On" : "Off"}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={setTrue}>On</button>
      <button onClick={setFalse}>Off</button>
    </div>
  );
}

API

useBoolean.d.tsts

useBoolean(defaultValue?: boolean): { value: boolean; setValue: (value: boolean) => void; setTrue: () => void; setFalse: () => void; toggle: () => void }

Parameters

Name	Type	Default	Description
defaultValue	boolean	false	The value the boolean starts from.

Returns

Name	Type	Description
value	boolean	The current boolean value.
setValue	(value: boolean) => void	Sets the value directly.
setTrue	() => void	Sets the value to true.
setFalse	() => void	Sets the value to false.
toggle	() => void	Flips the value.

Hook

The implementation, straight from hookli. Copy it, or install the package.

src/hooks/use-boolean/use-boolean.tstsx

import { useCallback, useState } from "react";

export interface UseBooleanReturn {
  value: boolean;
  setValue: (value: boolean) => void;
  setTrue: () => void;
  setFalse: () => void;
  toggle: () => void;
}

export const useBoolean = (defaultValue = false): UseBooleanReturn => {
  const [value, setValue] = useState(defaultValue);

  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
  const toggle = useCallback(() => setValue((prev) => !prev), []);

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

View source on GitHub