16 lines
626 B
TypeScript
16 lines
626 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
export function useMobileLayout(maxWidth = 680) {
|
|
const query = `(max-width: ${maxWidth}px)`;
|
|
const [mobile, setMobile] = useState(() => typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(query).matches);
|
|
useEffect(() => {
|
|
if (typeof window.matchMedia !== 'function') return;
|
|
const media = window.matchMedia(query);
|
|
const update = () => setMobile(media.matches);
|
|
media.addEventListener('change', update);
|
|
update();
|
|
return () => media.removeEventListener('change', update);
|
|
}, [query]);
|
|
return mobile;
|
|
}
|