querypoint

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ć