JavaScript breakpoints

Use Drupal breakpoint media queries in your JavaScripts!

Given the following in the active theme's *.breakpoints.yml:

mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

You can use your Drupal breakpoints with window.matchMedia in your conditions:

if (window.matchMedia(window.drupalSettings.jsBp["narrow"]).matches) {
   console.log('Narrow');
} else {
   console.log('Not narrow');
}

Or as events:

 window.matchMedia(window.drupalSettings.jsBp["wide"]).addListener(
   function(e){
      if (e.matches) {
         console.log('Wide');
      } else {
         console.log('Not wide');
      }
    });