watch-css-media v0.1.2
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 |