24 lines
644 B
TypeScript
24 lines
644 B
TypeScript
|
/**
|
||
|
|
* Viewport hook shared by the chart components.
|
||
|
|
* Hydration-safe: SSR and the first client render report desktop; the
|
||
|
|
* media-query subscription flips the value after mount.
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
export function useIsMobile(maxWidth = 640): boolean {
|
||
|
|
const [isMobile, setIsMobile] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
|
||
|
|
const update = () => setIsMobile(mq.matches);
|
||
|
|
update();
|
||
|
|
mq.addEventListener('change', update);
|
||
|
|
return () => mq.removeEventListener('change', update);
|
||
|
|
}, [maxWidth]);
|
||
|
|
|
||
|
|
return isMobile;
|
||
|
|
}
|