@etsoo/materialui/lib/mjs/useCurrentBreakpoint.js

TypeScript Material-UI Implementation

import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
/**
 * Hook to get the current breakpoint
 * @returns The current breakpoint
 */
export function useCurrentBreakpoint() {
    const theme = useTheme();
    const items = [
        useMediaQuery(theme.breakpoints.down("xs")) ? "xs" : null,
        useMediaQuery(theme.breakpoints.between("xs", "sm")) ? "sm" : null,
        useMediaQuery(theme.breakpoints.between("sm", "md")) ? "md" : null,
        useMediaQuery(theme.breakpoints.between("md", "lg")) ? "lg" : null,
        useMediaQuery(theme.breakpoints.up("lg")) ? "xl" : null
    ];
    return items.find((item) => item != null) ?? "lg";
}