markus/finances
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases 6 Packages 1 Wiki Activity Actions

N-FIN-33: fix hook accessing matchMedia while undefined

Browse source
This commit is contained in:
Markus Thielker 2024-03-17 01:23:21 +01:00
parent f0ee68beb2
commit 34a76cf93b
No known key found for this signature in database
1 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/lib/hooks/useMediaQuery.ts
View file

@ -1,16 +1,21 @@
import { useEffect, useMemo, useState } from 'react';
'use client';
import { useEffect, useState } from 'react';
export function useMediaQuery(mq: string) {
const mql = useMemo(() => matchMedia(mq), [mq]);
const [matches, setMatch] = useState(mql.matches);
const [matches, setMatch] = useState(
() => typeof window !== 'undefined' ? window.matchMedia(mq).matches : false,
);
useEffect(() => {
const listener = (e: any) => setMatch(e.matches);
mql.addEventListener('change', listener);
return () => mql.removeEventListener('change', listener);
}, [mq, mql]);
if (typeof window !== 'undefined') {
const mql = window.matchMedia(mq);
const listener = (e: any) => setMatch(e.matches);
mql.addEventListener('change', listener);
return () => mql.removeEventListener('change', listener);
}
}, [mq]);
return matches;
}