watch-css-media

Provides an easy way to provide callbacks for when the browser crosses the threshold of a media query. Uses the Observable API to allow for composable event streams

getting the code

install from npm: npm install watch-css-media

use in your project:

import {WatchCSSMedia} from 'watch-css-media'; Or var WatchCSSMedia = require('watch-css-media');

running the tests

Install the dependencies using npm install

Run the tests using npm test

Transpile to ES5 using npm run build

Build the docs using npm run doc

Generate the docs for the readme with npm run build-readme

API Reference

WatchCSSMedia

• WatchCSSMedia
  • .addQuery(query, callback, [transform]) ⇒ Observable
  • .addQueries(args) ⇒ Array.<Observable>
  • .onOrientationChange(callback) ⇒ Observable
  • .onWidthGreaterThan(min, callback, [transform]) ⇒ Observable
  • .onWidthLessThan(min, callback, [transform]) ⇒ Observable

watchCSSMedia.addQuery(query, callback, [transform]) ⇒ Observable

General function to create a media query listener from a specified media query

Kind: instance method of WatchCSSMedia
Returns: Observable - An Observable event stream created from the MediaQueryList listener

| Param | Type | Description | | --- | --- | --- | | query | string | a media query, which will be watched | | callback | function | a function to call when the media query boundary is changed Unless a transform function is provided, the callback function will be invoked with an object containing the following keys: matches: boolean. whether (true) or not (false) the browser matches the specified query query: string. the original media query string originalEvent: Event. the original event that triggered the callback `event$: Observable. An Observable event stream created from the MediaQueryList listener | | [transform] | function | an optional function to map the mql event object to the parameter passed into the callback |

watchCSSMedia.addQueries(args) ⇒ Array.<Observable>

Shortcut method to add multiple listeners. Each element in the arguments array corresponds to the parameters of addQuery

Kind: instance method of WatchCSSMedia
Returns: Array.<Observable> - An Array of Observable event streams created from the MediaQueryList listeners

| Param | Type | Description | | --- | --- | --- | | args | Array | an array of {query, callback, transform} objects |

watchCSSMedia.onOrientationChange(callback) ⇒ Observable

Shortcut method to add an event listener for orientation changes

Kind: instance method of WatchCSSMedia
Returns: Observable - An Observable event stream created from the MediaQueryList listener

| Param | Type | Description | | --- | --- | --- | | callback | function | a callback function to execute when the orientation changes The callback function will be invoked with an object containing the following keys: isLandscape: boolean. whether (true) or not (false) the device is now in landscape orientation isPortrait: boolean. whether (true) or not (false) the device is now in portrait orientation query: string. the original media query string originalEvent: Event. the original event that triggered the callback `event$: Observable. An Observable event stream created from the MediaQueryList listener |

watchCSSMedia.onWidthGreaterThan(min, callback, [transform]) ⇒ Observable

Shortcut method to add an event listener for browser width changes. This allows for easy creation of callbacks that fire when the browser crosses certain width thresholds without having to use window.on('resize');

Kind: instance method of WatchCSSMedia
Returns: Observable - An Observable event stream created from the MediaQueryList listener

| Param | Type | Description | | --- | --- | --- | | min | string | a string representing the minimum width, including units (e.g. '500px') | | callback | function | a callback function to execute when the browser width crosses the threshold Unless a transform function is provided, the callback function will be invoked with an object containing the following keys: matches: boolean. whether (true) or not (false) the browser is wider than the provided width query: string. the original media query string originalEvent: Event. the original event that triggered the callback `event$: Observable. An Observable event stream created from the MediaQueryList listener | | [transform] | function | an optional function to map the mql event object to the parameter passed into the callback |

watchCSSMedia.onWidthLessThan(min, callback, [transform]) ⇒ Observable

Shortcut method to add an event listener for browser width changes. This allows for easy creation of callbacks that fire when the browser crosses certain width thresholds without having to use window.on('resize');

Kind: instance method of WatchCSSMedia
Returns: Observable - An Observable event stream created from the MediaQueryList listener

| Param | Type | Description | | --- | --- | --- | | min | string | a string representing the maximum width, including units (e.g. '500px') | | callback | function | a callback function to execute when the browser width crosses the threshold Unless a transform function is provided, the callback function will be invoked with an object containing the following keys: matches: boolean. whether (true) or not (false) the browser is narrower than the provided width query: string. the original media query string originalEvent: Event. the original event that triggered the callback `event$: Observable. An Observable event stream created from the MediaQueryList listener | | [transform] | function | an optional function to map the mql event object to the parameter passed into the callback |