mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-16 01:55:15 +03:00
826ac501e3
Issue: https://github.com/StanGirard/quivr/issues/1721 Demo: https://github.com/StanGirard/quivr/assets/63923024/78bf776b-643c-43a2-ab03-ca2ec0aa5eb5
30 lines
738 B
TypeScript
30 lines
738 B
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
// Max width for mobile device: 640px
|
|
// Match small min-width media query in tailwind
|
|
const MOBILE_MAX_WIDTH = 640;
|
|
|
|
export const useDevice = (): { isMobile: boolean } => {
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
const screenWidth = window.innerWidth;
|
|
setIsMobile(screenWidth < MOBILE_MAX_WIDTH);
|
|
};
|
|
|
|
// Initial check
|
|
handleResize();
|
|
|
|
// Event listener for screen resize
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
// Clean up event listener on component unmount
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
};
|
|
}, []);
|
|
|
|
return { isMobile };
|
|
};
|