/** * Return type for the useBreakpoint hook */ export type BreakpointReturnProps = { /** * The breakpoint name */ name: "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; /** * Minimum width for this breakpoint */ min: number | undefined; /** * Maximum width for this breakpoint */ max: number | undefined; /** * Current device orientation */ orientation: "portrait" | "landscape"; /** * Current viewport width in CSS pixels (from window.innerWidth) */ innerWidth: number; /** * Current viewport height in CSS pixels (from window.innerHeight) */ innerHeight: number; /** * True for all breakpoints (mobile-first: xs and above) */ xs: boolean; /** * True when viewport width >= 640px (mobile-first: sm and above) */ sm: boolean; /** * True when viewport width >= 768px (mobile-first: md and above) */ md: boolean; /** * True when viewport width >= 1024px (mobile-first: lg and above) */ lg: boolean; /** * True when viewport width >= 1280px (mobile-first: xl and above) */ xl: boolean; /** * True when viewport width >= 1536px (mobile-first: xxl and above) */ xxl: boolean; }; /** * Custom hook for detecting current breakpoint and viewport information. * * Features: * - Detects current breakpoint based on viewport width * - Supports all standard breakpoints (xs, sm, md, lg, xl, xxl) * - Provides mobile-first boolean props (e.g., `lg` is true for lg, xl, and xxl) * - Provides device orientation information * - Returns current viewport dimensions * - Uses hammer-token breakpoint values for consistency * - Listens for window resize events * - Supports optional disable functionality * - Uses window.innerWidth/innerHeight for viewport measurements * * @example * ```tsx * const breakpoint = useBreakpoint(); * // Mobile-first approach: *
* ``` * * @param props - Optional configuration object * @param props.disable - Whether to disable the hook * @returns Current breakpoint information or undefined if disabled */ export declare const useBreakpoint: (props?: { disable?: boolean; }) => BreakpointReturnProps | undefined;