useToggle

Manage a boolean toggle state

Installation

import { useCallback, useState } from 'react';
 
/**
 * A custom hook that manages a boolean toggle state.
 *
 * @param {boolean} [defaultValue=false] - Initial value for the toggle state. Defaults to `false` if not provided.
 *
 * @returns An object containing:
 * - `on`: A boolean indicating the current state of the toggle (`true` for `on`, `false` for `off`).
 * - `toggle`: A function to toggle the state between `on` and `off`.
 * - `setToggle`: A function to directly set the toggle state to a specific boolean value.
 *
 * @example
 * const { on, toggle, setToggle } = useToggle();
 * on ? 'On' : 'Off';
 * toggle();
 * setToggle(true);
 */
export const useToggle = (defaultValue = false) => {
  const [on, setToggle] = useState(!!defaultValue);
 
  const toggle = useCallback(() => {
    setToggle((x) => !x);
  }, []);
 
  return { on, toggle, setToggle };
};

Usage

import { useToggle } from '~/hooks/use-toggle';

const { on, toggle, setToggle } = useToggle();
 
on ? <span>On</span> : <span>Off</span>;
toggle();
setToggle(true);

Details

Toggle Functionality

• The hook provides a simple and efficient way to manage a boolean toggle state, allowing you to easily switch between two states (on/off).
• It initializes the toggle state based on an optional defaultValue, which defaults to false if not provided.

State Management

• on: A boolean state that indicates the current status of the toggle. It is true when the toggle is in the "on" position and false when it is "off".
• setToggle: A function that allows you to directly set the toggle state to a specific boolean value, providing flexibility in managing the toggle state programmatically.

Toggle Action

• toggle: A function that toggles the state of on between true and false. This function can be called in response to user actions (e.g., button clicks) to change the toggle state seamlessly.

Return Value

• The hook returns an object containing:
• on: A boolean indicating the current state of the toggle (true for "on", false for "off").
• toggle: A function to toggle the state between "on" and "off".
• setToggle: A function to directly set the toggle state to a specific boolean value.