Skip to Content
UI KitHooksuseToggle

Overview

The useToggle hook offers a convenient and intuitive way to handle boolean states in React applications. It’s particularly useful for controlling UI states such as open/close or show/hide, simplifying state management for components like dropdowns, modals, and collapsible panels.

Incorporating useToggle into your React components streamlines state management, particularly for UI components that require a binary state, enhancing user experience and interactivity.

Key Features

  • Easy State Toggling: Simplifies the process of toggling a boolean state.
  • Enhanced UI Control: Ideal for managing visibility and state of UI components.
  • Initial State Customization: Allows setting an initial state for the toggle.

How It Works

The hook initializes a boolean state and provides a function to toggle this state. It uses useState and useCallback from React to manage and update the state efficiently.

Syntax

const [state, toggleState] = useToggle(initialValue);
  • initialValue: The initial boolean value (default is false).

Usage Example

Here’s an example of how to use the useToggle hook in a component:

import { useToggle } from '@akinon/ui-hooks';
 
const MyComponent = () => {
  const [isOpen, toggleOpen] = useToggle(false);
 
  return (
    <div>
      <button onClick={toggleOpen}>{isOpen ? 'Close' : 'Open'}</button>
      {isOpen && <p>Content</p>}
    </div>
  );
};
 
export default MyComponent;
useThrottleuseWindowSize