@payfit/unity-components
Version:
43 lines (42 loc) • 1.49 kB
TypeScript
export type ContainerQueryLevel = 'component' | 'section' | 'page' | 'app';
interface UseContainerQueryLevelOptions {
/**
* The ref to the container element to observe
*/
ref: React.RefObject<HTMLElement | null>;
}
interface UseContainerQueryLevelReturn {
/**
* The current container query level based on the container width
*/
level: ContainerQueryLevel;
/**
* The current width of the observed container
*/
width: number;
}
/**
* Hook that determines the current container query level based on container width.
*
* This hook uses ResizeObserver to monitor the width of a container element and
* determines which container query level it falls into based on Unity's container
* breakpoints from design tokens. Breakpoints are automatically synced with Unity's
* design system: component (< 703px), section (703-1062px), page (1063-1438px), app (≥ 1439px).
* @param options Configuration options containing the ref to observe
* @returns Object containing the current level and width
* @example
* ```tsx
* function MyComponent() {
* const containerRef = useRef<HTMLDivElement>(null)
* const { level, width } = useContainerQueryLevel({ ref: containerRef })
*
* return (
* <div ref={containerRef}>
* Current level: {level} (width: {width}px)
* </div>
* )
* }
* ```
*/
export declare function useContainerQueryLevel(options: UseContainerQueryLevelOptions): UseContainerQueryLevelReturn;
export {};