use-media-query

1"use client";
2import { useEffect, useState } from "react";
3 
4function getDevice(): "mobile" | "tablet" | "desktop" | null {
5	if (typeof window === "undefined") {
6		return null;
7	}
8 
9	if (window.matchMedia("(min-width: 1024px)").matches) {
10		return "desktop";
11	}
12 
13	if (window.matchMedia("(min-width: 640px)").matches) {
14		return "tablet";
15	}
16 
17	return "mobile";
18}
19 
20function getDimensions() {
21	if (typeof window === "undefined") {
22		return null;
23	}
24 
25	return { width: window.innerWidth, height: window.innerHeight };
26}
27 
28export function useMediaQuery() {
29	const [device, setDevice] = useState<"mobile" | "tablet" | "desktop" | null>(
30		null
31	);
32	const [dimensions, setDimensions] = useState<{
33		width: number;
34		height: number;
35	} | null>(null);
36 
37	useEffect(() => {
38		const checkDevice = () => {
39			setDevice(getDevice());
40			setDimensions(getDimensions());
41		};
42 
43		// Initial detection
44		checkDevice();
45 
46		// Listener for windows resize
47		window.addEventListener("resize", checkDevice);
48 
49		// Cleanup listener
50		return () => {
51			window.removeEventListener("resize", checkDevice);
52		};
53	}, []);
54 
55	return {
56		device,
57		width: dimensions?.width,
58		height: dimensions?.height,
59		isMobile: device === "mobile",
60		isTablet: device === "tablet",
61		isDesktop: device === "desktop",
62	};
63}