react-use
react-use copied to clipboard
Add useSwitcher hook
Add a hook that would simplify working with boolean values
/**
* @param defaultValue initial value of the switch. Default {@link false}
* @example
* const [isOpen, turnIsOpenOn, turnIsOpenOff, toggleIsOpen] = useSwitcher();
*/
export declare const useSwitcher: (defaultValue?: boolean) => readonly [boolean, () => void, () => void, () => void];
Hi, Iβd be interested in contributing a PR for this if itβs still available.
What's the difference from useToggle?
@xiyaowong useToggle returns only one method toggle whereas useSwitcher returns more options
@Deyi-Chen it's still available
ready-made code:
/**
* Hook switch. Makes working with useState<boolean>
*
* @param defaultValue initial value of the switch. Default {@link false}
* @example
* const [isOpen, turnIsOpenOn, turnIsOpenOff, toggleIsOpen] = useSwitcher();
*/
export const useSwitcher = (defaultValue = false) => {
const [value, setValue] = useState<boolean>(defaultValue)
const on = useCallback(() => setValue(true), [])
const off = useCallback(() => setValue(false), [])
const toggleValue = useCallback(() => setValue(prevValue => !prevValue), [])
return [value, on, off, toggleValue] as const
}```