Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 100x 100x 25x 100x 16x 100x 14x 100x 18x 100x | import { useCallback, useState } from "react";
/**
* useToggle return type
*/
export interface UseToggleReturn {
/**
* Current toggle state
*/
value: boolean;
/**
* Toggle the current state
*/
toggle: () => void;
/**
* Set state to true
*/
setTrue: () => void;
/**
* Set state to false
*/
setFalse: () => void;
/**
* Set state to a specific value
*/
setValue: (value: boolean) => void;
}
/**
* A hook for managing boolean state with helpful utilities.
* Provides toggle, setTrue, setFalse, and setValue functions.
*
* @param initialValue - Initial boolean value (default: false)
* @returns Object containing the current value and control functions
*
* @example
* ```tsx
* function Modal() {
* const { value: isOpen, toggle, setTrue, setFalse } = useToggle(false);
*
* return (
* <>
* <button onClick={setTrue}>Open</button>
* <button onClick={toggle}>Toggle</button>
* {isOpen && <div>Modal Content</div>}
* </>
* );
* }
* ```
*/
export function useToggle(initialValue: boolean = false): UseToggleReturn {
const [value, setValue] = useState<boolean>(initialValue);
const toggle = useCallback(() => {
setValue((prev) => !prev);
}, []);
const setTrue = useCallback(() => {
setValue(true);
}, []);
const setFalse = useCallback(() => {
setValue(false);
}, []);
const setValueCallback = useCallback((newValue: boolean) => {
setValue(newValue);
}, []);
return {
value,
toggle,
setTrue,
setFalse,
setValue: setValueCallback,
};
}
|