openstatus.dev
Openstatus
www.openstatus.dev
1import * as React from "react";
2
3const TABLET_BREAKPOINT = 1024;
4
5export function useIsTablet() {
6 const [isTablet, setIsTablet] = React.useState<boolean | undefined>(
7 undefined,
8 );
9
10 React.useEffect(() => {
11 const mql = window.matchMedia(`(max-width: ${TABLET_BREAKPOINT - 1}px)`);
12 const onChange = () => {
13 setIsTablet(window.innerWidth < TABLET_BREAKPOINT);
14 };
15 mql.addEventListener("change", onChange);
16 setIsTablet(window.innerWidth < TABLET_BREAKPOINT);
17 return () => mql.removeEventListener("change", onChange);
18 }, []);
19
20 return !!isTablet;
21}