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