Responsive State:

Intro

Module to handle app state and event handlers based on media queries.

Getting Started

Create and instance of responsiveState and add a state

JavaScript:

import responsiveState from 'pmx-responsive-state';

const rs = responsiveState().add({
  id: 'mobile',
  query: 'screen and (max-width: 767px)',
  onEnter: () => { console.log('ENTERING Mobile mode >>>>>>>>>>>>>>>') },
  onLeave: () => { console.log('LEAVING Tablet mode <<<<<<<<<<<<<<<') },
});

How to use

Setup

The module is exported as an UMD module so it can be used with AMD, CommonJS, ES Modules and in the browser.

• Install the dependency Using Yarn

yarn add pmx-responsive-state

or using NPM

npm install pmx-responsive-state --save

• Include the module

CommonJS

const responsiveState = require('pmx-responsive-state').default;

ES2015 modules

import responsiveState from 'pmx-responsive-state';

API

.add(options)

options: options can be an array or an object. For each object, the options could be:

• id: optional. The module will ensure that the passed id will always be unique. If omitted, a unique ID will be generated and you could grab it by saving saving the call to this method in a var (that will return an object containing the unique ID).
• query: optional. Media query to be used to detect when the state will become active or not. Note: If omitted the query will always match.
• onEnter: optional Function to be executed every time the states gets active.
• onEnterOnce: optional Function to be executed only the first time the states gets active.
• onLeave: optional Function to be executed every time the states gets inactive.
• onLeaveOnce: optional Function to be executed only the first time the states gets inactive. returns: an object containing the ID used to generate the state.

.remove(id|[id])

options: id can be an array or a string detailing the IDs to be removed returns: a Boolean or an Array of Booleans detailing the status of the process of removing the state/s

.removeAll()

returns: an Array of Booleans detailing the status of the process of removing all the states

.getState(id)

options: a string detailing the state ID to be retrieved returns: an object containing all the details of the retrieved state

.getStates([id])

options: an array detailing the states IDs to be retrieved returns: an array of object containing all the details of the retrieved states

Browser Support

• IE 10+
• Chrome
• Firefox
• Safari

This library has been written with some ES2015 features that need to be polyfilled:

• Map
• Object.assign