Typed HooksGetting StarteduseBoolean

useBoolean

Custom hook that handles boolean state with useful utility functions.

useBoolean is a simple but powerful custom React hook that provides convenient utilities for managing boolean state values. It encapsulates common boolean operations like toggling, setting to true/false, and resetting to the initial value.

This hook is particularly useful for managing UI states such as modals, accordions, toggles, and other interactive elements that need boolean control with clean, semantic function names.

Current value
false
Note: "Toggle" and "Set Opposite" perform the same action but use different hook methods.

API

▸ useBoolean(initialValue): [boolean, Controls]

NameTypeRequiredDescription
initialValuebooleanYesThe initial value for the boolean state.

Returns [value, controls]:

  • value (boolean): The current boolean state value.
  • controls (object):
    • setValue(value: boolean): Set the state directly.
    • toggle(): Toggle the state.
    • setTrue(): Set state to true.
    • setFalse(): Set state to false.
    • reset(): Reset to initial value.
    • getValue(): Get the current value.

Hook

import { useCallback, useState } from 'react'
 
type BooleanHookReturnProps = {
  setValue: (value: boolean) => void
  toggle: () => void
  setTrue: () => void
  setFalse: () => void
  reset: () => void
  getValue: () => boolean
}
 
/**
 * A custom hook that manages a boolean state.
 * @param initialValue - The initial value of the boolean state.
 * @returns An object containing:
 * - `value`: The current boolean state.
 * - `setValue`: A function to set the state to a specific value.
 * - `toggle`: A function to toggle the state between true and false.
 * - `setTrue`: A function to set the state to true.
 * - `setFalse`: A function to set the state to false.
 * - `reset`: A function to reset the state to its initial value.
 * - `getValue`: A function to retrieve the current state value.
 *
 * @example
 * const [value, { toggle, setTrue, setFalse, reset, getValue }] = useBoolean(false);
 *
 * // Usage examples:
 * toggle(); // Toggles the state
 * setTrue(); // Sets the state to true
 * setFalse(); // Sets the state to false
 * reset(); // Resets the state to the initial value
 * const currentValue = getValue(); // Retrieves the current state value
 */
 
type useBooleanReturnType = [boolean, BooleanHookReturnProps]
type UseBoolean = (initialValue: boolean) => useBooleanReturnType
 
export const useBoolean: UseBoolean = (initialValue) => {
  const [value, setValue] = useState(initialValue)
 
  const toggle = () => setValue((prev) => !prev)
  const setTrue = () => setValue(true)
  const setFalse = () => setValue(false)
  const getValue = useCallback(() => value, [value])
 
  const reset = () => setValue(initialValue)
 
  return [value, { toggle, setTrue, setFalse, reset, getValue, setValue }]
IntroductionuseDefault