@modern-kit/react
Version:
1 lines • 2.27 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useMediaQuery/index.ts"],"sourcesContent":["import { isClient } from '@modern-kit/utils';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useState } from 'react';\n\nconst getMatchMedia = (mediaQueryString: string, defaultValue?: boolean) => {\n if (isClient()) {\n return window.matchMedia(mediaQueryString).matches;\n }\n return defaultValue ?? false;\n};\n\n/**\n * @description `useMediaQuery` 훅은 주어진 미디어 쿼리 문자열에 맞춰 현재 viewport가 미디어 쿼리 조건을 만족하는지 여부를 반환합니다.\n *\n * @param {string} mediaQueryString - 미디어 쿼리 조건을 나타내는 문자열 (예: '(max-width: 768px)').\n * @param {boolean} defaultValue - 미디어 쿼리 결과를 확인할 수 없는 경우 사용할 기본 값 (옵션).\n *\n * @returns {boolean} 현재 뷰포트가 주어진 미디어 쿼리 조건을 만족하면 `true`, 만족하지 않으면 `false`를 반환합니다.\n *\n * @example\n * const isBigScreen = useMediaQuery('(min-width: 768px)');\n *\n * isBigScreen; // viewport가 768px 이상이면 true, 768px 이하면 false\n */\nexport function useMediaQuery(\n mediaQueryString: string,\n defaultValue?: boolean\n): boolean {\n const [isMatch, setIsMatch] = useState(\n getMatchMedia(mediaQueryString, defaultValue)\n );\n\n const handleChange = (e: MediaQueryListEvent) => setIsMatch(e.matches);\n\n useEventListener(\n typeof window !== 'undefined' ? window.matchMedia(mediaQueryString) : null,\n 'change',\n handleChange\n );\n\n return isMatch;\n}\n"],"names":["isClient","useState","useEventListener"],"mappings":";;;;;;;;AAIA,MAAM,aAAA,GAAgB,CAAC,gBAAA,EAA0B,YAAA,KAA2B;AAC1E,EAAA,IAAIA,gBAAS,EAAG;AACd,IAAA,OAAO,MAAA,CAAO,UAAA,CAAW,gBAAgB,CAAA,CAAE,OAAA;AAAA,EAC7C;AACA,EAAA,OAAO,YAAA,IAAgB,KAAA;AACzB,CAAA;AAeO,SAAS,aAAA,CACd,kBACA,YAAA,EACS;AACT,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,cAAA;AAAA,IAC5B,aAAA,CAAc,kBAAkB,YAAY;AAAA,GAC9C;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2B,UAAA,CAAW,EAAE,OAAO,CAAA;AAErE,EAAAC,sCAAA;AAAA,IACE,OAAO,MAAA,KAAW,WAAA,GAAc,MAAA,CAAO,UAAA,CAAW,gBAAgB,CAAA,GAAI,IAAA;AAAA,IACtE,QAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}