use-toggle
use-toggle
불리언(boolean) 또는 옵션 배열 값을 토글하는 훅이에요. 현재 값과 토글 함수를 반환해요.
출처: 문서
본문
사용법 (Usage)
옵션 배열을 전달하지 않으면 use-toggle은 false를 기본값으로 하는 불리언 값을 사용해요:
import { useToggle } from '@mantine/hooks';
const [value, toggle] = useToggle();
// -> value === false
toggle(); // -> value === true
타입 설정 (Set type)
기본적으로 TypeScript가 타입을 추측하지만, 타입이 넓어지는 것을 막기 위해 const assertion을 사용하는 것이 더 나은 경우가 많아요:
import { useToggle } from '@mantine/hooks';
useToggle(['light', 'dark']); // value is string
useToggle(['light', 'dark'] as const); // value is 'dark' | 'light'
useToggle(['light', 'dark']); // same as above
정의 (Definition)
type UseToggleAction = (value?: React.SetStateAction<T>) => void;
type UseToggleReturnValue = [T, UseToggleAction];
function useToggle<T>(options?: T[]): UseToggleReturnValue;
내보내는 타입 (Exported types)
UseToggleReturnValue 타입은 @mantine/hooks에서 내보내져요:
import type { UseToggleReturnValue } from '@mantine/hooks';