watch-css-media

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