@ducor/react/dist/provider/breakpoint.js

admin template ui interface

import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useEffect, useRef, useState, } from "react";
import MemoComponent from "../components/memo-component";
export var BreakpointContext = createContext(undefined);
export var breakpoints = {
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    "2xl": 1536,
};
var getCurrentBreakpoint = function () {
    var width = window.innerWidth;
    if (width >= breakpoints["2xl"])
        return "2xl";
    if (width >= breakpoints.xl)
        return "xl";
    if (width >= breakpoints.lg)
        return "lg";
    if (width >= breakpoints.md)
        return "md";
    return "sm";
};
var BreakpointProvider = function (_a) {
    var children = _a.children;
    var isMount = useRef(true);
    var _b = useState(getCurrentBreakpoint()), breakpoint = _b[0], setBreakpoint = _b[1];
    useEffect(function () {
        var debounceTimeout;
        var handleResize = function () {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(function () {
                if (!isMount.current)
                    return;
                setBreakpoint(getCurrentBreakpoint());
            }, 500); // 500ms debounce
        };
        window.addEventListener("resize", handleResize);
        return function () {
            isMount.current = false;
            window.removeEventListener("resize", handleResize);
            clearTimeout(debounceTimeout);
        };
    }, []);
    return (_jsx(BreakpointContext.Provider, { value: [breakpoint], children: _jsx(MemoComponent, { component: children }) }));
};
export default BreakpointProvider;