Numerous Problems Multiplied

    mq-observer

    1.1.0 • Public • Published

    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

    Install

    npm i mq-observer

    DownloadsWeekly Downloads

    5

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    24.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • daun