Pmx-responsive-state NPM

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