Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-24 04:00:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: add helper to imperitively match a media query

Browse Source
This commit is contained in:
Abdullah Atta
2023-08-07 05:48:03 +05:00
parent 71aee40f8d
commit 392261c208
3 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/src/hooks/use-media-query.ts
View File

@@ -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;

6
apps/web/src/hooks/use-mobile.ts
View File

@@ -17,7 +17,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
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;

7
apps/web/src/hooks/use-tablet.ts
View File

@@ -17,8 +17,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
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;