useToggle

useToggle manages a boolean value and provides convenience actions for common state transitions.

When to use

  • Showing and hiding UI sections.
  • Toggling a control state in forms.
  • Managing binary interaction modes.

Example

const { value, toggle, setTrue, setFalse } = useToggle(false);

Usage

import { useToggle } from '@branditdev/hooks';

export function UseToggleDemo() {
  const { value, toggle, setTrue, setFalse } = useToggle(false);

  return (
    <div>
      <p>{value ? 'enabled' : 'disabled'}</p>
      <button type='button' onClick={toggle}>
        Toggle
      </button>
      <button type='button' onClick={setTrue}>
        Set true
      </button>
      <button type='button' onClick={setFalse}>
        Set false
      </button>
    </div>
  );
}

API

useToggle(initialValue?): object

Defined in: state/useToggle/useToggle.ts:14

Creates boolean state with semantic toggle helpers.

Parameters

NameTypeOptionalDefaultDescription
initialValuebooleanyesfalseInitial boolean state value.

Returns

object

Current value and helper actions (setValue, setTrue, setFalse, toggle).

setFalse()

setFalse: () => void

Returns

void

setTrue()

setTrue: () => void

Returns

void

setValue

setValue: Dispatch<SetStateAction<boolean>>

toggle()

toggle: () => void

Returns

void

value

value: boolean

Source

import { useCallback, useState } from 'react';

export function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

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

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