@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 { useEffect, useState } from 'react';
// TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
export const BREAKPOINTS = {
    medium: '37.5rem',
    wide: '72.5rem',
};
const useIsAfterBreakpoint = (breakpoint) => {
    const [matches, setMatches] = useState(false);
    useEffect(() => {
        // Check for window object to avoid SSR issues
        if (typeof window === 'undefined')
            return undefined;
        const query = `(min-width: ${BREAKPOINTS[breakpoint]})`;
        const media = window.matchMedia(query);
        const listener = () => setMatches(media.matches);
        // Set initial state
        setMatches(media.matches);
        media.addEventListener('change', listener);
        return () => media.removeEventListener('change', listener);
    }, [breakpoint]);
    return matches;
};
export default useIsAfterBreakpoint;