strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make useIsDesktop Tailwind 4 compatible

Browse Source
This commit is contained in:
Sam Becker 2025-02-08 22:04:07 -06:00
parent 6eab91025b
commit a8a880e748
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/utility/useIsDesktop.ts
View File

@ -1,15 +1,18 @@
import { useLayoutEffect, useState } from 'react'; import { useEffect, useState } from 'react';
export default function useIsDesktop() { export default function useIsDesktop() {
const [isDesktop, setIsDesktop] = useState(false); const [isDesktop, setIsDesktop] = useState<boolean>();
useLayoutEffect(() => { useEffect(() => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const mql = window.matchMedia('(min-width: var(--breakpoint-md))'); const breakpointMd = getComputedStyle(document.documentElement)
.getPropertyValue('--breakpoint-md');
const mql = window.matchMedia(`(min-width: ${breakpointMd})`);
setIsDesktop(mql.matches); setIsDesktop(mql.matches);
const eventHandler = (event: MediaQueryListEvent) => {
const eventHandler = (event: MediaQueryListEvent) =>
setIsDesktop(event.matches); setIsDesktop(event.matches);
};
mql.addEventListener('change', eventHandler); mql.addEventListener('change', eventHandler);
return () => mql.removeEventListener('change', eventHandler); return () => mql.removeEventListener('change', eventHandler);
} }