Skip to content
Skip to content

Breakpoint module

A module that fires a custom event when a breakpoint changes, so (js) modules can react to breakpoint changes.


Usage

This module is included in the javascript bundle by default.

It emits an event bpupdate which passes in details of the current and previous breakpoint.

// listen for the custom event
document.addEventListener('bpupdate', myFunction, false);

function myFunction(e) { // this will fire everytime the breakpoint changes
  console.log(`I am here: ${e.detail.current}`) // current breakpoint
  console.log(`I came from: ${e.detail.previous}`) // previous breakpoint
}

// e.detail object that is available with this custom event
{
  current: 'md',
  previous: 'sm',
  gtBase: true,
  gtXxs: true,
  gtXs: true,
  gtSm: true,
  gtMd: false,
  gtLg: false,
  gtXl: false
}

The breakpoint detail object is also available on the global jwAtomic object @window.jwAtomic.modules.Breakpoint.detail.