@zimpa/breakpoint v0.3.0
@zimpa/breakpoint
Install
Install the package by running npm install --save @zimpa/template
.
Usage
This package can determine which breakpoint (that is specified in CSS) is the current active one. Make sure each page contains a snippet as in html/breakpoint.html
.
There is a SASS file you can include that has the breakpoints in it.
Breakpoint.listen((name) => {
// This function will be called initially and when the breakpoint changes (resize).
});
Functions
Breakpoint.listen
Provide a function that expects one argument, the name of the current breakpoint. Listen to changes, is called directly and when the (active) breakpoint changes. Returns a function to unsubscribe.
Breakpoint.current
Return the current breakpoint.
Breakpoint.smaller
Checks if the current breakpoint is smaller than the given breakpoint name.
Breakpoint.larger
Checks if the current breakpoint is larger than the given breakpoint name.
Breakpoint.equal
Checks if the current breakpoint is the same as the given breakpoint name.
Breakpoint.nearest
Checks if the which one of the given breakpoints (array of strings), comes closest to the current active breakpoint.
Tests
If you want to run the tests run npm run test:serve
and in another terminal run npm run test
.
Dependencies
This package uses the array methods find
and findIndex
, they are not supported by IE11. If you need to support that browser you will have to include polyfills for these methods.
import 'core-js/stable/array/find';
import 'core-js/stable/array/find-index';