ray-mediaquery - Awesome Media Queries in JavaScript

ray-mediaquery is a lightweight, pure javascript library (with no dependencies) for programmatically responding to media queries.

Getting ray-mediaquery

Install via npm

To install via npm, enter the following at the command line:

npm install ray-mediaquery

Quick Start

The main method you will be dealing with is register. It's basic signature is as follows:

RayMediaquery.register(query /* string */, handler /* object || array  || function */);

query is the CSS media query you wish to respond to, and handler is an object containing any logic to handle the query. An example of usage is as follows:

RayMediaquery.register("screen and (max-width:1000px)", {

    match : function() {},      // OPTIONAL
                                // If supplied, triggered when the media query transitions
                                // *from an unmatched to a matched state*

    unmatch : function() {},    // OPTIONAL
                                // If supplied, triggered when the media query transitions
                                // *from a matched state to an unmatched state*.
                                // Also may be called when handler is unregistered (if destroy is not available)

    setup : function() {},      // OPTIONAL
                                // If supplied, triggered once immediately upon registration of the handler

    destroy : function() {},    // OPTIONAL
                                // If supplied, triggered when handler is unregistered. Place cleanup code here

    deferSetup : true           // OPTIONAL, defaults to false
                                // If set to true, defers execution the setup function
                                // until the media query is first matched. still triggered just once
});

// demo2
// Match & Unmatch Example
require('ray-mediaquery')
  .register('only screen and (min-width: 0) and (max-width: 992px)', {
    match: () => {
      this.setState({ menuMode: 'inline' });
    },
    unmatch: () => {
      this.setState({ menuMode: 'horizontal' });
    },
  });

RayMediaquery.register("screen and (orientation: landscape)", {
	match : function() {
		example.match();
	},
	unmatch : function() {
		example.unmatch();
	}
});

// Setup Example
RayMediaquery.register("screen and (orientation: landscape)", {
	setup : function() {
		example.setup();
	},

	match : function() {
		example.match();
	},

	unmatch : function() {
		example.unmatch();
	}
});

// deferSetup Example
RayMediaquery.register("screen and (orientation: landscape)", {
	deferSetup : true,
	setup : function() {
		example.setup();
	},
	match : function() {
		example.match();
	},
	unmatch : function() {
		example.unmatch();
	}
});

// Unregister Example
RayMediaquery.register("screen and (orientation: landscape)", {
	match : function() {
		example.match();
	},
	unmatch : function() {
		example.unmatch();
	},
	destroy : function() {
		example.destroy();
		$(".destroy-trigger").remove();
	}
});

$(".destroy-trigger").click(function() {
	RayMediaquery.unregister("screen and (orientation: landscape)");
});

// shouldDegrade Example
RayMediaquery.register("screen and (min-width: 500000px)", {
	match : function() {
		example.match();
	}
}, true);

License

MIT