useReducedMotion

1"use client";
2 
3import { useSyncExternalStore } from "react";
4 
5const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
6 
7function subscribe(onStoreChange: () => void): () => void {
8  const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
9 
10  mediaQuery.addEventListener("change", onStoreChange);
11 
12  return () => {
13    mediaQuery.removeEventListener("change", onStoreChange);
14  };
15}
16 
17function getSnapshot(): boolean {
18  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
19}
20 
21function getServerSnapshot(): boolean {
22  return false;
23}
24 
25export function useReducedMotion(): boolean {
26  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
27}