useSwitch
A custom React hook that provides a simple way to manage boolean state with convenient methods for turning on, off, and toggling the switch.
Import
import { useSwitch } from '@vortex-kit/vortex';Display
const { isEnabled, turnOn, turnOff, flipSwitch } = useSwitch(defaultValue);Switch State: Disabled
Features
Simple boolean state management
Convenient methods for common operations
Optimized with React.useCallback for performance
Supports default value initialization
TypeScript support with full type safety
Lightweight and focused on single responsibility
Basic Usage
The useSwitch hook provides a simple way to manage boolean state with convenient methods.
Loading...
Show Code
With Default Value
You can initialize the switch with a default value.
Loading...
Show Code
With Switch Component
The hook works perfectly with Switch components for UI interactions.
Loading...
Show Code
Conditional Rendering
Use the switch state for conditional rendering of components.
Loading...
Show Code
Performance
The useSwitch hook is optimized for performance:
- Memoized callbacks: All returned functions (turnOn, turnOff, flipSwitch) are wrapped with React.useCallback to prevent unnecessary re-renders
- Stable references: The hook maintains stable function references across renders
- Minimal re-renders: Only re-renders when the boolean state actually changes