Module to handle app state and event handlers based on media queries.
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 <<<<<<<<<<<<<<<') },
});
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
const responsiveState = require('pmx-responsive-state').default;
import responsiveState from 'pmx-responsive-state';
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 uniqueID
). -
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 theID
used to generate the state.
options: id
can be an array
or a string
detailing the ID
s to be removed
returns: a Boolean
or an Array
of Boolean
s detailing the status of the process of removing the state/s
returns: an Array
of Boolean
s detailing the status of the process of removing all the states
options: a string
detailing the state ID
to be retrieved
returns: an object
containing all the details of the retrieved state
options: an array
detailing the states ID
s to be retrieved
returns: an array
of object
containing all the details of the retrieved states
- IE 10+
- Chrome
- Firefox
- Safari
This library has been written with some ES2015 features that need to be polyfilled:
- Map
- Object.assign