@patreon/studio/module/hooks/useCurrentBreakpoint/index.js

Patreon Studio Design System

import { useEffect, useState } from 'react';
import { getBreakpointFromWidth } from './lib/getBreakpointFromWidth';
/**
 * This helper returns true if the current breakpoint result is yet available
 */
export function isBreakpointAvailable(result) {
    return result.state === 'available';
}
/**
 * This hook returns the current breakpoint when it is available.
 * It will return a tagged object with a state of "inital" until the
 * breakpoint is hydrated on the client. Once the breakpoint is
 * hydrated, the hook will return a breakpoint object with a state
 * of "defined".
 */
export function useCurrentBreakpoint() {
    const [currentResult, setCurrentResult] = useState({ state: 'pending' });
    useEffect(() => {
        if (typeof ResizeObserver !== 'undefined') {
            const observer = new ResizeObserver((nodes) => {
                const node = nodes[0];
                if (node) {
                    setCurrentResult({
                        state: 'available',
                        value: getBreakpointFromWidth(node.contentRect.width),
                    });
                }
            });
            observer.observe(document.body);
            return () => observer.disconnect();
        }
        else {
            const handle = () => {
                setCurrentResult({
                    state: 'available',
                    value: getBreakpointFromWidth(window.innerWidth),
                });
            };
            handle();
            window.addEventListener('resize', handle);
            return () => window.removeEventListener('resize', handle);
        }
    }, []);
    return currentResult;
}
//# sourceMappingURL=index.js.map