markus/finances
1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/finances.git synced 2025-04-18 16:41:18 +00:00
Code Issues Projects Releases Packages 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) { export function useMediaQuery(mq: string) {
const mql = useMemo(() => matchMedia(mq), [mq]); const [matches, setMatch] = useState(
const [matches, setMatch] = useState(mql.matches); () => typeof window !== 'undefined' ? window.matchMedia(mq).matches : false,
);
useEffect(() => { useEffect(() => {
const listener = (e: any) => setMatch(e.matches); if (typeof window !== 'undefined') {
mql.addEventListener('change', listener); const mql = window.matchMedia(mq);
const listener = (e: any) => setMatch(e.matches);
return () => mql.removeEventListener('change', listener); mql.addEventListener('change', listener);
}, [mq, mql]); return () => mql.removeEventListener('change', listener);
}
}, [mq]);
return matches; return matches;
} }