use-react-breakpoint

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

Hooks

useBreakpointChecker

Hook returns proxy-object that returns boolean when accessed by key. true - means breakpoint "fits".

Example:

import { useBreakpointChecker } from 'use-react-breakpoint';

const checker = useBreakpointChecker();
const isXl = checker.xl;
const isMobile = !checker.sm;

useBreakpoint

hook that accepts breakpoint name and returns fits or smaller

import { useBreakpoint } from 'use-react-breakpoint';

const showMenu = useBreakpoint('md') === 'fits';
const showMobileMenu = useBreakpoint('md') === 'smaller';

useBreakpointFits

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

import { useBreakpointFits } from 'use-react-breakpoint';

const showMenu = useBreakpointFits('md');
const showMobileMenu = !useBreakpointFits('md');

useCurrentBreakpoint

Just a simple hook that returns current screen breakpoint

import { useCurrentBreakpoint } from 'use-react-breakpoint';

const breakpoint = useCurrentBreakpoint(); // 'md', 'lg', 'xl', etc.

Utilities:

Exposing some of the useful utils you might need

Default Breakpoints

export const defaultBreakpointsMap: BreakpointsMapType = {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1536,
  '3xl': 1920,
  '4xl': 2560,
};

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

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

Overrides

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

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 });