useReducedMotionuseReducedMotion

OS가 모션 줄이기를 요청하는 동안 true입니다.True while the OS asks for reduced motion.

사용법Usage

reveal.tsx

import { type ReactNode } from "react";

import { useReducedMotion } from "@horon-ai/react";

function Reveal({ children }: { children: ReactNode }) {
  const reducedMotion = useReducedMotion();
  return <div className={reducedMotion ? undefined : "motion-rise"}>{children}</div>;
}

시그니처Signature

use-reduced-motion.ts

export function useReducedMotion(): boolean

매개변수Parameters

매개변수가 없습니다.Takes no parameters.

반환값Returns

사용자가 모션 줄이기를 선호하는지 여부입니다. 서버 렌더와 첫 패스에서는 false입니다.Whether the user prefers reduced motion; false during a server render and the first pass.

동작과 주의Behavior notes

(prefers-reduced-motion: reduce) 쿼리를 useMediaQuery로 읽는 얇은 훅입니다.A thin reading of useMediaQuery over (prefers-reduced-motion: reduce).
같은 설정의 CSS 쪽은 globals.css의 모션 유틸리티가 맡고, 그 유틸리티가 재생 시간을 0에 가깝게 줄입니다.The CSS side of the same preference is handled by the motion utilities in globals.css, which collapse their durations.