@amsterdam/design-system-react/dist/common/useIsAfterBreakpoint.js

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
 */
import { useLayoutEffect, useState } from 'react';
// TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
const breakpoints = {
    medium: '36rem',
    wide: '68rem',
};
const useIsAfterBreakpoint = (breakpoint) => {
    const [matches, setMatches] = useState(false);
    useLayoutEffect(() => {
        // Check for window object to avoid SSR issues
        if (breakpoint && typeof window !== 'undefined') {
            const media = window.matchMedia(`(min-width: ${breakpoints[breakpoint]})`);
            if (media.matches !== matches) {
                setMatches(media.matches);
            }
            const listener = () => setMatches(media.matches);
            window.addEventListener('resize', listener);
            return () => window.removeEventListener('resize', listener);
        }
        return undefined;
    }, [matches, breakpoint]);
    return matches;
};
export default useIsAfterBreakpoint;