❤
npm
Sign UpSign In

viewport-state-manager

0.1.3 • Public • Published

ViewportStateManager

NPM

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

debounceTime

Duration of debounce set on the window resize or orientationchange events

Type: Number

  • default: 250

currentViewportState

The default viewport state. Note: This will automatically be set on instantiation if no argument is supplied

Type: String

  • default: ''

Browser Compatibility

IE9+, Chrome, Firefox, Safari, Android 2.3+, iOS 5+. You know, the good stuff!

Readme

Keywords

Package Sidebar

Install

npm i viewport-state-manager

Repository

github.com/kyledetella/viewport-state-manager

Homepage

github.com/kyledetella/viewport-state-manager

Weekly Downloads

1

Version

0.1.3

License

ISC

Last publish

Collaborators

  • kyledetella
Try on RunKit
Report malware