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

Create custom media query hook

Browse Source
This commit is contained in:
Sam Becker 2023-11-07 00:13:48 -06:00
parent f45d555989
commit f431470e7b
3 changed files with 15 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -38,7 +38,6 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.11.0",
"react-responsive": "^9.0.2",
"sonner": "^1.1.0",
"tailwindcss": "3.3.5",
"ts-exif-parser": "^0.2.2",

34
pnpm-lock.yaml generated
View File

@ -92,9 +92,6 @@ dependencies:
react-icons:
specifier: ^4.11.0
version: 4.11.0(react@18.2.0)
react-responsive:
specifier: ^9.0.2
version: 9.0.2(react@18.2.0)
sonner:
specifier: ^1.1.0
version: 1.1.0(react-dom@18.2.0)(react@18.2.0)
@ -1929,10 +1926,6 @@ packages:
which: 2.0.2
dev: false
/css-mediaquery@0.1.2:
resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
dev: false
/css.escape@1.5.1:
resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
dev: false
@ -2986,10 +2979,6 @@ packages:
engines: {node: '>=10.17.0'}
dev: false
/hyphenate-style-name@1.0.4:
resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
dev: false
/iconv-lite@0.6.3:
resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
engines: {node: '>=0.10.0'}
@ -3973,12 +3962,6 @@ packages:
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
dev: false
/matchmediaquery@0.3.1:
resolution: {integrity: sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==}
dependencies:
css-mediaquery: 0.1.2
dev: false
/merge-stream@2.0.0:
resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
dev: false
@ -4614,19 +4597,6 @@ packages:
resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
dev: false
/react-responsive@9.0.2(react@18.2.0):
resolution: {integrity: sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==}
engines: {node: '>=0.10'}
peerDependencies:
react: '>=16.8.0'
dependencies:
hyphenate-style-name: 1.0.4
matchmediaquery: 0.3.1
prop-types: 15.8.1
react: 18.2.0
shallow-equal: 1.2.1
dev: false
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
@ -4816,10 +4786,6 @@ packages:
has-property-descriptors: 1.0.0
dev: false
/shallow-equal@1.2.1:
resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
dev: false
/shebang-command@2.0.0:
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
engines: {node: '>=8'}

17
src/utility/useIsDesktop.ts
View File

@ -1,10 +1,23 @@
import { useMediaQuery } from 'react-responsive';
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '@/../tailwind.config';
import { useLayoutEffect, useState } from 'react';
const screens = resolveConfig(tailwindConfig).theme?.screens as any;
export default function useIsDesktop() {
const isDesktop = useMediaQuery({ query: `(min-width: ${screens.md})` });
const [isDesktop, setIsDesktop] = useState(false);
useLayoutEffect(() => {
if (typeof window !== 'undefined') {
const mql = window.matchMedia(`(min-width: ${screens.md})`);
setIsDesktop(mql.matches);
const eventHandler = (event: MediaQueryListEvent) => {
setIsDesktop(event.matches);
};
mql.addEventListener('change', eventHandler);
return () => mql.removeEventListener('change', eventHandler);
}
}, []);
return isDesktop;
};