State

useToggle

Boolean state with toggle and explicit set.

Demo

live · imported from hookli

import { useToggle } from "hookli";

export function Demo() {
  const [on, toggle, setOn] = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>{on ? "On" : "Off"}</button>
      <button onClick={() => setOn(true)}>Set on</button>
      <button onClick={() => setOn(false)}>Set off</button>
    </div>
  );
}

Usage

use-toggle.tsxtsx

import { useToggle } from "hookli";

export function Demo() {
  const [on, toggle, setOn] = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>{on ? "On" : "Off"}</button>
      <button onClick={() => setOn(true)}>Set on</button>
      <button onClick={() => setOn(false)}>Set off</button>
    </div>
  );
}

API

useToggle.d.tsts

useToggle(initialValue?: boolean): [boolean, () => void, (value: boolean) => void]

Parameters

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

Returns

Name	Type	Description
[0] value	boolean	The current boolean state.
[1] toggle	() => void	Flips the value.
[2] setValue	(value: boolean) => void	Sets the value explicitly.

Hook

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

src/hooks/useToggle.hook.tstsx

import { useCallback, useState } from "react";

export const useToggle = (
  initialValue = false,
): [boolean, () => void, (value: boolean) => void] => {
  const [state, setState] = useState(initialValue);

  const toggle = useCallback(() => {
    setState((prevState) => !prevState);
  }, []);

  const setExplicit = useCallback((value: boolean) => {
    setState(value);
  }, []);

  return [state, toggle, setExplicit];
};

View source on GitHub