@hakit/components
Version:
A series of components to work with @hakit/core
29 lines • 1 kB
TypeScript
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