querypoint

1.0.1 • Public • Published

querypoint

Build Status BrowserStack Status

Media query breakpoints manager.

Features:

  • Named breakpoints for easier organization
  • Initial call when adding listener instead of native behavior (called on first media query event)

Install

npm install querypoint --save

Usage

const querypoint = require('querypoint');
const qp = querypoint();
 
const listener = ( mq ) => {
    if ( mq.matches ) {
        // Matched!
    }
};
 
qp.add('bp-alpha-s', 'screen and (min-width: 600px)');
qp.add('bp-alpha-m', window.matchMedia('screen and (min-width: 800px)'));
 
qp.get('bp-alpha-s').addListener(listener);
// Subsequent same listener will be registered only once
qp.get('bp-alpha-s').addListener(listener);
 
// Remove single listener…
qp.get('bp-alpha-s').removeListener(listener);
// …or all registered listeners
qp.get('bp-alpha-s').removeAllListeners();
 
// Remove named breakpoint and all registered listeners
qp.remove('bp-alpha-s');

API

querypoint()

Returns: BreakpointManager

Returns instance of breakpoint manager.

qp.add(breakpointName, mq)

Returns: Breakpoint

Add breakpoint to breakpoint manager instance.

breakpointName

Type: String

mq

Type: String|MediaQueryList

Valid media query string or instance of window.matchMedia.

qp.remove(breakpointName)

Returns: BreakpointManager

Remove breakpoint from breakpoint manager instance.

breakpointName

Type: String

qp.get(breakpointName)

Returns: Breakpoint

Returns registered breakpoint in breakpoint manager instance.

breakpointName

Type: String

breakpoint.addListener(cb)

Add listener to breakpoint.

cb

Type: Function

breakpoint.removeListener(cb)

Remove listener from breakpoint.

cb

Type: Function

breakpoint.removeAllListeners()

Remove all registered listeners from breakpoint.

Test

For local automated tests, run npm run test:automated:local.

For manual tests, run npm run test:manual:local and open http://localhost:9000/ in your browser.

Browser support

Tested in IE9+ and all modern browsers. For proper window.matchMedia support in IE9 you should use polyfill.

License

MIT © Ivan Nikolić

Package Sidebar

Install

npm i querypoint

Weekly Downloads

0

Version

1.0.1

License

MIT

Last publish

Collaborators

  • niksy