feat: add use-mobile shadcn hook
Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>
This commit is contained in:
27
src/hooks/use-mobile.ts
Normal file
27
src/hooks/use-mobile.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
const MOBILE_BREAKPOINT = 768;
|
||||||
|
|
||||||
|
function useIsMobile() {
|
||||||
|
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
|
||||||
|
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 };
|
||||||
Reference in New Issue
Block a user