useBoolean

Just a simplier way of dealing with boolean states.

Installation

npx rabbithook@latest add use-boolean

Usage

App.tsx

import useBoolean from "@/hooks/use-boolean";

function Component() {
  const [state, toggleState] = useBoolean(false);

  return (
    <>
      <p>State: { JSON.stringify(state) }</p>

      <button onClick={() => toggleState()}>Toggle</button>
      <button onClick={() => toggleState(false)}>Set to false</button>
      <button onClick={() => toggleState(true)}>Set to true</button>
    </>
  );
}

Code

Typescript

use-boolean.ts

import { useState } from "react"

type IUseBooleanReturnType = [boolean, (value?: boolean) => void];

function useBoolean(defaultValue: boolean): IUseBooleanReturnType {
  const [value, setValue] = useState(defaultValue);

  function toggleValue(value?: boolean) {
    setValue(prev => value ?? !prev);
  }

  return [value, toggleValue];
}

export default useBoolean;

Javascript

use-boolean.js

import { useState } from "react"

function useBoolean(defaultValue) {
  const [value, setValue] = useState(defaultValue);

  function toggleValue(value) {
    setValue(prev => value ?? !prev);
  }

  return [value, toggleValue];
}

export default useBoolean;