use-react-breakpoint

Package that allows to easily work app breakpoints It provides couple of hooks to work with breakpoints

Hooks

useBreakpoint

hook that accepts breakpoint name and returns fits or smaller

1import { useBreakpoint } from 'use-react-breakpoint';
2
3const showMenu = useBreakpoint('md') === 'fits';
4const showMobileMenu = useBreakpoint('md') === 'smaller';

useBreakpointFits

Same as useBreakpoint, but returns true if your screen size is greater of equal to breakpoint size

1import { useBreakpointFits } from 'use-react-breakpoint';
2
3const showMenu = useBreakpointFits('md');
4const showMobileMenu = !useBreakpointFits('md');

useCurrentBreakpoint

Just a simple hook that returns current screen breakpoint

1import { useCurrentBreakpoint } from 'use-react-breakpoint';
2
3const breakpoint = useCurrentBreakpoint(); // 'md', 'lg', 'xl', etc.

Utilities:

Exposing some of the useful utils you might need

Default Breakpoints

1export const defaultBreakpointsMap: BreakpointsMapType = {
2  xs: 0,
3  sm: 640,
4  md: 768,
5  lg: 1024,
6  xl: 1280,
7  '2xl': 1536,
8  '3xl': 1920,
9  '4xl': 2560,
10};

compareBreakpoints

Utility that return fits or smaller First param comparator, second param - comparable. So result defines if 2nd parameter is bigger or smaller than 1st

1compareBreakpoints('lg', 'md') === 'smaller';

Overrides

You can override defaultBreakpointsMap with anything else all hooks and utils accept it as last param

1import { defaultBreakpointsMap as defMap } from 'use-react-breakpoint';
2
3const showMenu = useBreakpoint('md', { ...defMap, '5xl': 3400 }) === 'fits';
4
5const isHugeScreen = useBreakpointFits('5xl', { ...defMap, '5xl': 3400 });
6
7const current = useCurrentBreakpoint({ ...defMap, '5xl': 3400 });
8
9const compare = compareBreakpoints('5xl', 'md', { ...defMap, '5xl': 3400 });