mq-observer

Media Query Observer

Simple media query observer.

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

• Use named queries
• Add default queries: landscape, portrait, dark
• Allow number-only queries like 1024 or 60em

Installation

npm install mq-observer

Usage

import observer from 'mq-observer'

Adding queries

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

Matching queries

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

Observing queries

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

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

Killing observers

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

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

Default queries

• landscape: orientation: landscape
• portrait: orientation: portrait
• dark: prefers-color-scheme: dark

Supported query formats

• Fully qualified: screen and (min-width: 1000px)
• Condition only: (min-width: 1000px)
• Width only: 1000px, 1000

Sharing media queries between SCSS & JS

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

License

MIT License © Philipp Daun