Usage
Parameters
Initial toggle state
Return Value
Returns a tuple with the current boolean value and an object of helper functions:Current boolean state
Helper functions
Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
Simple boolean toggle with explicit on/off helpers
import { useToggle } from '@kivora/react';
function Demo() {
const [isOpen, { toggle, setTrue, setFalse }] = useToggle();
return (
<div>
<p>Status: {isOpen ? 'Open' : 'Closed'}</p>
<button onClick={toggle}>Toggle</button>
<button onClick={setTrue}>Open</button>
<button onClick={setFalse}>Close</button>
</div>
);
}
const [isModalOpen, { toggle, setFalse }] = useToggle();
return (
<>
<button onClick={toggle}>Open Modal</button>
{isModalOpen && (
<Modal onClose={setFalse}>
<h2>Modal Content</h2>
</Modal>
)}
</>
);
const [isDark, { toggle }] = useToggle(false);
return (
<div className={isDark ? 'dark' : 'light'}>
<button onClick={toggle}>
Switch to {isDark ? 'Light' : 'Dark'} Mode
</button>
</div>
);
const [isExpanded, { setTrue, setFalse }] = useToggle();
return (
<div
onMouseEnter={setTrue}
onMouseLeave={setFalse}
>
<button>Hover me</button>
{isExpanded && <DropdownMenu />}
</div>
);