use-reduced-motion
use-reduced-motion
사용자가 움직임을 줄이는 것을 선호하는지(prefers-reduced-motion) 감지하는 훅이에요.
출처: 문서
본문
사용법 (Usage)
use-reduced-motion 훅은 사용자가 움직임을 줄이는 것을 선호하는지 감지해요. 내부적으로 use-media-query 훅을 사용해요. 이 훅은 window.matchMedia() API에 의존하며, 첫 번째 인수에 초기 값을 제공하지 않는 한 API를 사용할 수 없을 때(예: 서버 사이드 렌더링 중) 항상 false를 반환해요.
이 훅을 사용해 사용자가 움직임 줄이기를 선호하는지((prefers-reduced-motion: reduce) 미디어 쿼리) 감지하고, 이 값에 따라 애니메이션 지속 시간을 설정할 수 있어요.
import { Badge } from '@mantine/core';
import { useReducedMotion } from '@mantine/hooks';
function Demo() {
const reduceMotion = useReducedMotion();
return (
{reduceMotion ? 'You prefer to reduce motion' : 'You prefer not to reduce motion'}
);
}
정의 (Definition)
interface UseMediaQueryOptions {
getInitialValueInEffect: boolean;
}
function useReducedMotion(initialValue?: boolean, options?: UseMediaQueryOptions): boolean;