Data fetching made easy. Check out the new category! 🚀

useToggle

Controls a boolean state with a toggle function.

useToggle
This component uses the useToggle hook to toggle a boolean state.

The state is: Off

Installation

Prop

PropTypeDefaultDescription
initialValuebooleanfalseThe initial value of the boolean state
onToggle(value: boolean) => voidnullThe callback function to be called when the state changes

Data

PropTypeDescription
valuebooleanThe current value of the boolean state
togglefunctionThe function to toggle the boolean state

Key Features & Details

onToggle Callback

  • The onToggle callback is called every time the state changes, with the new value as its argument.
  • The callback is called after the state is updated.

Returned Values

  • The hook returns a tuple: [value, toggle].
  • value is the current boolean state.
  • toggle is a function that toggles the state between true and false.

Initial Value

  • The initialValue prop sets the initial state (defaults to false).

Best Practices & Caveats

  • The hook is designed for toggling boolean state in React components.
  • For best performance, memoize the onToggle callback if it depends on other values.
  • The hook is client-side only.

Examples

Basic Usage

const [on, toggle] = useToggle();
return <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>;

With Initial Value

const [checked, toggle] = useToggle(true);

With onToggle Callback

const [active, toggle] = useToggle(false, (val) => {
  console.log('Toggled to:', val);
});