This is a package with use-breakpoint. It allows to get window's current breakpoint: xs, sm, md, etc.
npm install use-react-breakpointPackage that allows to easily work app breakpoints
It provides couple of hooks to work with breakpoints
Hook returns proxy-object that returns boolean when accessed by key. true - means breakpoint "fits".
Example:
``tsx
import { useBreakpointChecker } from 'use-react-breakpoint';
const checker = useBreakpointChecker();
const isXl = checker.xl;
const isMobile = !checker.sm;
`
hook that accepts breakpoint name and returns fits or smaller
`tsx
import { useBreakpoint } from 'use-react-breakpoint';
const showMenu = useBreakpoint('md') === 'fits';
const showMobileMenu = useBreakpoint('md') === 'smaller';
`
Same as useBreakpoint, but returns true if your screen size is greater of equal to breakpoint size
`tsx
import { useBreakpointFits } from 'use-react-breakpoint';
const showMenu = useBreakpointFits('md');
const showMobileMenu = !useBreakpointFits('md');
`
Just a simple hook that returns current screen breakpoint
`tsx
import { useCurrentBreakpoint } from 'use-react-breakpoint';
const breakpoint = useCurrentBreakpoint(); // 'md', 'lg', 'xl', etc.
`
Exposing some of the useful utils you might need
`ts`
export const defaultBreakpointsMap: BreakpointsMapType = {
xs: 0,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
'2xl': 1536,
'3xl': 1920,
'4xl': 2560,
};
Utility that return fits or smaller
First param comparator, second param - comparable. So result defines if 2nd parameter is bigger or smaller than 1st
`js`
compareBreakpoints('lg', 'md') === 'smaller';
You can override defaultBreakpointsMap with anything else
all hooks and utils accept it as last param
`tsx
import { defaultBreakpointsMap as defMap } from 'use-react-breakpoint';
const showMenu = useBreakpoint('md', { ...defMap, '5xl': 3400 }) === 'fits';
const isHugeScreen = useBreakpointFits('5xl', { ...defMap, '5xl': 3400 });
const current = useCurrentBreakpoint({ ...defMap, '5xl': 3400 });
const compare = compareBreakpoints('5xl', 'md', { ...defMap, '5xl': 3400 });
``