73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState, useEffect } from "react";
|
||
|
|
|
||
|
|
export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
||
|
|
|
||
|
|
export interface ResponsiveConfig {
|
||
|
|
breakpoints: Record<Breakpoint, number>;
|
||
|
|
currentBreakpoint: Breakpoint;
|
||
|
|
isMobile: boolean;
|
||
|
|
isTablet: boolean;
|
||
|
|
isDesktop: boolean;
|
||
|
|
width: number;
|
||
|
|
height: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const defaultBreakpoints = {
|
||
|
|
xs: 0,
|
||
|
|
sm: 640,
|
||
|
|
md: 768,
|
||
|
|
lg: 1024,
|
||
|
|
xl: 1280,
|
||
|
|
"2xl": 1536,
|
||
|
|
};
|
||
|
|
|
||
|
|
export const useResponsive = (customBreakpoints?: Partial<Record<Breakpoint, number>>) => {
|
||
|
|
const breakpoints = { ...defaultBreakpoints, ...customBreakpoints };
|
||
|
|
|
||
|
|
const [windowSize, setWindowSize] = useState({
|
||
|
|
width: typeof window !== "undefined" ? window.innerWidth : 1024,
|
||
|
|
height: typeof window !== "undefined" ? window.innerHeight : 768,
|
||
|
|
});
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handleResize = () => {
|
||
|
|
setWindowSize({
|
||
|
|
width: window.innerWidth,
|
||
|
|
height: window.innerHeight,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener("resize", handleResize);
|
||
|
|
return () => window.removeEventListener("resize", handleResize);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const getCurrentBreakpoint = (): Breakpoint => {
|
||
|
|
const { width } = windowSize;
|
||
|
|
|
||
|
|
if (width >= breakpoints["2xl"]) return "2xl";
|
||
|
|
if (width >= breakpoints.xl) return "xl";
|
||
|
|
if (width >= breakpoints.lg) return "lg";
|
||
|
|
if (width >= breakpoints.md) return "md";
|
||
|
|
if (width >= breakpoints.sm) return "sm";
|
||
|
|
return "xs";
|
||
|
|
};
|
||
|
|
|
||
|
|
const currentBreakpoint = getCurrentBreakpoint();
|
||
|
|
|
||
|
|
const isMobile = currentBreakpoint === "xs" || currentBreakpoint === "sm";
|
||
|
|
const isTablet = currentBreakpoint === "md";
|
||
|
|
const isDesktop = currentBreakpoint === "lg" || currentBreakpoint === "xl" || currentBreakpoint === "2xl";
|
||
|
|
|
||
|
|
return {
|
||
|
|
breakpoints,
|
||
|
|
currentBreakpoint,
|
||
|
|
isMobile,
|
||
|
|
isTablet,
|
||
|
|
isDesktop,
|
||
|
|
width: windowSize.width,
|
||
|
|
height: windowSize.height,
|
||
|
|
};
|
||
|
|
};
|