Mq-observer NPM

Media Query Observer

Simple media query observer.

Wraps the wonderful enquire.js, with a few additions:

npm install mq-observer

import observer from 'mq-observer'

observer.add({
  'multi-col-content': 768,
  'floating-nav': 1024
})

if (observer.matches('multi-col-content')) {
  // Run code for multi-col layout
}

See the enquire.js docs for details on registering handlers.

observer.register('multi-col-content', {
  match() {
    /* Init */
  },
  unmatch() {
    /* Teardown */
  }
})

Registering an observer returns a handle that can be used to unregister it later.

// Register handler
const unregister = observer.register('query', {})

// Kill handler
unregister()

See icss-js for a possible solution to importing named media queries from SCSS.

5 years ago

5 years ago