@baseplate-dev/ui-components/dist/hooks/use-mobile.js

Shared UI component library

import * as React from 'react';
const MOBILE_BREAKPOINT = 768;
/**
 * Determines if the screen is mobile.
 *
 * @returns true if the screen is mobile, false otherwise
 */
export function useIsMobile() {
    const [isMobile, setIsMobile] = React.useState(undefined);
    React.useEffect(() => {
        const mql = globalThis.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
        const onChange = () => {
            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
        };
        mql.addEventListener('change', onChange);
        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
        return () => {
            mql.removeEventListener('change', onChange);
        };
    }, []);
    return !!isMobile;
}
//# sourceMappingURL=use-mobile.js.map