natura11y/src/js/utilities/getCurrentBreakpoint.js

Natura11y is an open-source design system for creating beautiful web interfaces with a focus on accessible interaction design and front-end development.

export const getCurrentBreakpoint = () => {

  // SSR guard
  if (typeof window === 'undefined') {
    return {
      value: 'md',
      isDesktop: false,
      isMobile: true,
    };
  }

  const breakpoint = window
    .getComputedStyle(document.documentElement)
    .getPropertyValue('--current-bp')
    .trim()
    .replace(/^["']|["']$/g, '');

  const isDesktop = ['lg', 'xl', 'xxl'].includes(breakpoint);
  const isMobile = ['sm', 'md'].includes(breakpoint);

  return {
    value: breakpoint,
    isDesktop,
    isMobile,
  };
};