@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';