dify/web/hooks/use-breakpoints.ts
2023-05-15 08:51:32 +08:00

27 lines
658 B
TypeScript

'use client'
import React from 'react'
export enum MediaType {
mobile = 'mobile',
tablet = 'tablet',
pc = 'pc',
}
const useBreakpoints = () => {
const [width, setWidth] = React.useState(globalThis.innerWidth);
const media = (() => {
if (width <= 640) return MediaType.mobile;
if (width <= 768) return MediaType.tablet;
return MediaType.pc;
})();
React.useEffect(() => {
const handleWindowResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleWindowResize);
return () => window.removeEventListener("resize", handleWindowResize);
}, []);
return media;
}
export default useBreakpoints