@amsterdam/design-system-react/dist/common/useViewportHasMinWidth.d.ts

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
export declare const BREAKPOINTS: {
    readonly medium: "37.5rem";
    readonly wide: "72.5rem";
};
type Breakpoint = keyof typeof BREAKPOINTS;
/**
 * Hook to determine if the viewport width is at or beyond a given breakpoint.
 *
 * **Prefer CSS media queries over this hook.** Use this only when viewport-dependent
 * logic must run in JavaScript, e.g. for interactions or dynamic behaviour that cannot
 * be expressed in CSS. CSS media queries are more performant, better supported across
 * stacks, and easier to maintain.
 *
 * @param breakpoint - The breakpoint to match against: `'medium'` or `'wide'`.
 * @returns `true` if the viewport width meets or exceeds the breakpoint, `false` otherwise.
 */
declare const useViewportHasMinWidth: (breakpoint: Breakpoint) => boolean;
export default useViewportHasMinWidth;