mirror of
https://codeberg.org/MarkusThielker/finances.git
synced 2025-04-12 05:08:43 +00:00
N-FIN-33: create useMediaQuery hook
This commit is contained in:
parent
a6c9074490
commit
206ad0c528
1 changed files with 16 additions and 0 deletions
16
src/lib/hooks/useMediaQuery.ts
Normal file
16
src/lib/hooks/useMediaQuery.ts
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
|
||||||
|
export function useMediaQuery(mq: string) {
|
||||||
|
|
||||||
|
const mql = useMemo(() => matchMedia(mq), [mq]);
|
||||||
|
const [matches, setMatch] = useState(mql.matches);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const listener = (e: any) => setMatch(e.matches);
|
||||||
|
mql.addEventListener('change', listener);
|
||||||
|
|
||||||
|
return () => mql.removeEventListener('change', listener);
|
||||||
|
}, [mq, mql]);
|
||||||
|
|
||||||
|
return matches;
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue