strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make usePrefersReducedMotion more server friendly

Browse Source
This commit is contained in:
Sam Becker 2023-11-11 11:50:40 -06:00
parent 31d4706c33
commit 35183b7b98
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/utility/usePrefersReducedMotion.ts
View File

@ -3,20 +3,24 @@ import { useEffect, useState } from 'react';
const MEDIA_QUERY_SELECTOR = '(prefers-reduced-motion: reduce)';
const MEDIA_QUERY_EVENT = 'change';
const safelyGetMediaQuery = () => typeof window !== 'undefined'
? window.matchMedia(MEDIA_QUERY_SELECTOR)
: undefined;
const usePrefersReducedMotion = () => {
const [prefersReducedMotion, setPrefersReducedMotion] = useState(
window.matchMedia(MEDIA_QUERY_SELECTOR).matches
const [prefersReducedMotion, setPrefersReducedMotion] = useState<boolean>(
safelyGetMediaQuery()?.matches ?? false
);
useEffect(() => {
const mediaQuery = window.matchMedia(MEDIA_QUERY_SELECTOR);
const mediaQuery = safelyGetMediaQuery();
const listener = () => {
setPrefersReducedMotion(mediaQuery.matches);
setPrefersReducedMotion(mediaQuery?.matches ?? false);
};
mediaQuery.addEventListener(MEDIA_QUERY_EVENT, listener);
return () => mediaQuery.removeEventListener(MEDIA_QUERY_EVENT, listener);
mediaQuery?.addEventListener(MEDIA_QUERY_EVENT, listener);
return () => mediaQuery?.removeEventListener(MEDIA_QUERY_EVENT, listener);
}, []);
return prefersReducedMotion;