diff --git a/src/hooks/use-mobile.ts b/src/hooks/use-mobile.ts new file mode 100644 index 0000000..c6d57f0 --- /dev/null +++ b/src/hooks/use-mobile.ts @@ -0,0 +1,27 @@ +import * as React from "react"; + +const MOBILE_BREAKPOINT = 768; + +function useIsMobile() { + const [isMobile, setIsMobile] = React.useState( + undefined, + ); + + React.useEffect(() => { + const mediaQueryList = window.matchMedia( + `(max-width: ${MOBILE_BREAKPOINT - 1}px)`, + ); + const onChange = () => { + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + }; + + mediaQueryList.addEventListener("change", onChange); + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + + return () => mediaQueryList.removeEventListener("change", onChange); + }, []); + + return !!isMobile; +} + +export { useIsMobile };