MediaQuery

Responsive media query events.

Demos
Methods

Demos

Basic

Basic

Bind to media query changes.

<!-- Demo coming soon -->

import { MediaQuery, Utils } from 'Formstone';

Utils.ready(() =&gt; {
  // Demo coming soon
});

/* Demo coming soon */

Methods

Methods are publicly available static methods.

Name	Description
`.bind()`	Binds callbacks to a media query
`.unbind()`	Unbinds callbacks from a media query

.bind()

Binds callbacks to a media query.

Parameters

Name	Type	Default	Description
`key`	`string` (required)	`''`	Unique identifier for this binding
`media`	`string` (required)	`''`	Media query string (e.g., '(min-width: 768px)')
`data`	`object` (required)	`{}`	Object containing `enter` and/or `leave` callback functions

Examples

MediaQuery.bind('mobile', '(max-width: 740px)', {
  enter: function() {
    console.log('Mobile view');
  },
  leave: function() {
    console.log('Desktop view');
  }
});

.unbind()

Unbinds callbacks from a media query.

Parameters

Name	Type	Default	Description
`key`	`string` (required)	`''`	Unique identifier for the binding to remove
`media`	`string` (optional)	`''`	Specific media query string (omit to unbind from all)

Examples

MediaQuery.unbind('mobile');

MediaQuery.unbind('mobile', '(max-width: 740px)');