import { BreakPoint } from '..';
/**
 * @description This hook can be used to programmatically change the layout/content or functionality based on the current breakpoint.
 * This will return an object with all breakpoint key names and their active state.
 *
 * NOTE: If you're running hakit within an iframe, you'll need to update the window context in the HassConnect.options.windowContext property
 *
 * @example
 * ```tsx
 * import { useBreakpoint } from "@hakit/components";
 * function SomeComponent() {
 *  const bp = useBreakpoint();
 * return (
 *   <div>
 *     {bp.xxs && <p>Extra small</p>}
 *     {bp.xs && <p>Small</p>}
 *     {bp.sm && <p>Medium</p>}
 *     {bp.md && <p>Large</p>}
 *     {bp.lg && <p>Extra large</p>}
 *   </div>
 *   );
 * }
 *
 * @returns { [key in BreakPoint]: boolean } - Object containing the breakpoint keys and if they're active or not.
 */
export declare function useBreakpoint(): {
    [key in BreakPoint]: boolean;
};
//# sourceMappingURL=useBreakpoint.d.ts.map