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;