27 lines
1 KiB
TypeScript
27 lines
1 KiB
TypeScript
import { Breakpoint, Theme, useTheme } from "@mui/material/styles";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
|
|
type BreakpointOrNull = Breakpoint | null;
|
|
|
|
/**
|
|
* Be careful using this hook. It only works because the number of
|
|
* breakpoints in theme is static. It will break once you change the number of
|
|
* breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
|
|
*/
|
|
export function useWidth() {
|
|
const theme: Theme = useTheme();
|
|
const keys: Breakpoint[] = [...theme.breakpoints.keys].reverse();
|
|
return (
|
|
keys.reduce((output: BreakpointOrNull, key: Breakpoint) => {
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
const matches = useMediaQuery(theme.breakpoints.up(key));
|
|
return !output && matches ? key : output;
|
|
}, null) || "xs"
|
|
);
|
|
}
|
|
|
|
// useWidth wrapper that just tells you if you're in a mobile view or not given a set or
|
|
// using a standard set of "mobile" breakpoints. The same warnings as useWidth apply.
|
|
export function useMobile() {
|
|
return useWidth() === "xs";
|
|
}
|