diff --git a/apps/web/src/hooks/use-media-query.ts b/apps/web/src/hooks/use-media-query.ts index e3ba08637..6afa6622e 100644 --- a/apps/web/src/hooks/use-media-query.ts +++ b/apps/web/src/hooks/use-media-query.ts @@ -39,13 +39,11 @@ const useMediaQuery = (mediaQuery: string) => { return false; } - const [isVerified, setIsVerified] = useState( - !!window.matchMedia(mediaQuery).matches - ); + const [isMatch, setIsMatch] = useState(matchMediaQuery(mediaQuery)); useEffect(() => { const mediaQueryList = window.matchMedia(mediaQuery); - const documentChangeHandler = () => setIsVerified(!!mediaQueryList.matches); + const documentChangeHandler = () => setIsMatch(!!mediaQueryList.matches); if (mediaQueryList.addEventListener) mediaQueryList.addEventListener("change", documentChangeHandler); @@ -59,7 +57,10 @@ const useMediaQuery = (mediaQuery: string) => { }; }, [mediaQuery]); - return isVerified; + return isMatch; }; export default useMediaQuery; + +export const matchMediaQuery = (mediaQuery: string) => + !!window.matchMedia(mediaQuery).matches; diff --git a/apps/web/src/hooks/use-mobile.ts b/apps/web/src/hooks/use-mobile.ts index 4b2ced6eb..2a6fa5b3f 100644 --- a/apps/web/src/hooks/use-mobile.ts +++ b/apps/web/src/hooks/use-mobile.ts @@ -17,7 +17,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import useMediaQuery from "./use-media-query"; +import useMediaQuery, { matchMediaQuery } from "./use-media-query"; -const useMobile = () => useMediaQuery("(max-width: 480px)"); +const MOBILE_MEDIA_QUERY = "(max-width: 480px)"; +export const useMobile = () => useMediaQuery(MOBILE_MEDIA_QUERY); +export const isMobile = () => matchMediaQuery(MOBILE_MEDIA_QUERY); export default useMobile; diff --git a/apps/web/src/hooks/use-tablet.ts b/apps/web/src/hooks/use-tablet.ts index d25e3954b..70d5fa6dc 100644 --- a/apps/web/src/hooks/use-tablet.ts +++ b/apps/web/src/hooks/use-tablet.ts @@ -17,8 +17,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import useMediaQuery from "./use-media-query"; +import useMediaQuery, { matchMediaQuery } from "./use-media-query"; -const useTablet = () => - useMediaQuery("(min-width: 480px) and (max-width: 1000px)"); +const TABLET_MEDIA_QUERY = "(min-width: 480px) and (max-width: 1000px)"; +export const useTablet = () => useMediaQuery(TABLET_MEDIA_QUERY); +export const isTablet = () => matchMediaQuery(TABLET_MEDIA_QUERY); export default useTablet;