gitscope
← marzneshin / v0.7.0 / dashboard/src/common/hooks/use-screen-breakpoint.ts
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/common/hooks/use-screen-breakpoint.ts · TypeScript
Blame Raw
 1import resolveConfig from "tailwindcss/resolveConfig";
 2
 3//@ts-expect-error
 4import tailwindConfig from "@marzneshin/../tailwind.config.js";
 5import { useEffect, useState } from 'react';
 6
 7const fullConfig = resolveConfig(tailwindConfig);
 8const {
 9    theme: { screens },
10} = fullConfig;
11
12export const useScreenBreakpoint = (query: keyof typeof screens): boolean => {
13    const mediaQuery = `(min-width: ${screens[query]})`;
14    const matchQueryList = window.matchMedia(mediaQuery);
15    const [isMatch, setMatch] = useState<boolean>(false);
16    const onChange = (e: MediaQueryListEvent) => setMatch(e.matches);
17    useEffect(() => {
18        setMatch(matchQueryList.matches);
19        matchQueryList.addEventListener("change", onChange);
20        return () => matchQueryList.removeEventListener("change", onChange);
21    }, [query, matchQueryList]);
22    return isMatch;
23}