Viewport-state-manager NPM

ViewportStateManager

Observe changes in the viewport and adapt your UIs accordingly.

Usage

Browserify

Viewport State Manager can be consumed as a CommonJS module using browserify.

npm install viewport-state-manager

var ViewportStateManager = require('viewport-state-manager');

var manager = new ViewportStateManager({
  ranges: {
    desktop: [1025, 5000],
    tablet: [768, 1024],
    handheld: [1, 767]
  },
  callback: function (currentState, previousState) {
    // ...
  }
});

RequireJS

ViewportStateManager is AMD compliant, so you can use it with require.js.

// Configure RequireJs
requirejs.config({
  paths: {
    'viewportStateManager' : 'path/to/viewport-state-manager'
  }
});

define(['viewportStateManager'], function (ViewportStateManager) {
  var manager = new ViewportStateManager({
    ranges: {
      desktop: [1025, 5000],
      tablet: [768, 1024],
      handheld: [1, 767]
    },
    callback: function (currentState, previousState) {
      // ...
    }
  });
});

Global

<html>
  <head></head>
  <body>

  <script src="viewport-state-manager.js"></script>
  <script>
    var manager = new ViewportStateManager({
      ranges: {
        desktop: [1025, 5000],
        tablet: [768, 1024],
        handheld: [1, 767]
      },
      callback: function (currentState, previousState) {
        // ...
      }
    });
  </script>
  </body>
</html>

Options

ranges (breakpoints)

Type: Object

  // key – breakpoint name
  // value – min, max array of pixel dimensions
  tablet: [768, 1024]

default – desktop: [1025, 5000], tablet: [768, 1024], handheld: [1, 767]

callback

Function to be invoked each time a breakpoint threshold is crossed

Type: Function

 function (currentState, previousState) { /* ... */ };

currentState - Type: String - The name of the breakpoint you are currently in
previousState - Type: String - The name of the breakpoint you exited from