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 = ;const qp = ; const listener = { if mqmatches // Matched! }; qp;qp; qp;// Subsequent same listener will be registered only onceqp; // Remove single listener…qp;// …or all registered listenersqp; // Remove named breakpoint and all registered listenersqp;
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ć