Veams Media Query Handler Plugin (@veams/plugin-media-query-handler)

The Media Query Handler Plugin provides to you the possibility to get the current media query name from your css.

TypeScript is supported.

Installation

NPM

npm install @veams/plugin-media-query-handler --save

Yarn

yarn add @veams/plugin-media-query-handler

Requirements

It makes sense to have the Veams Vent Plugin in place in order to work with that plugin. Otherwise you can not subscribe to a change of the media query handler and need to add this functionality manually.

Take a look at @veams/plugin-vent.

Usage

import Veams from '@veams/core';
import VeamsMediaQueryHandler from '@veams/plugin-media-query-handler';

// Intialize core of Veams
Veams.onInitialize(() => {
   	// Add plugins to the Veams system
	Veams.use(VeamsMediaQueryHandler, {
        delay: 200
    });
});

Options

You can pass a second parameter with an options object. Available options are:

SCSS

If you want to use the media query support then you can choose from 3 different approaches:

1. Add the following lines to a custom scss file and modify it like you want:

head {
	font-family: desktop;

	@include bp(1024px) {
		font-family: tablet-l;
	}

	@include bp(768px) {
		font-family: tablet-p;
	}

	@include bp(657px) {
		font-family: mobile-l;
	}

	@include bp(480px) {
		font-family: mobile-p;
	}

	@include bp(360px) {
		font-family: mobile-s;
	}
}

2. Automate it like that:

head {

	@if ($min-width) {
		font-family: unquote(nth(nth($breakpoints, 1), 1));
	} @else {
		font-family: unquote(nth(nth($breakpoints, length($breakpoints)), 1));
	}

	@each $breakpoint in $breakpoints {
		$name: nth($breakpoint, 1);
		$size: nth($breakpoint, 2);

		@include bp($size) {
			font-family: unquote($name);
		}
	}
}

Be sure you have the Veams Core imported for variables, maps and includes.

3. Import the file from that library:

@import "~@veams/plugin-media-query-handler/scss/media-query-handler";

Api

With that in place you can access the current media query breakpoint in your JavaScipt:

console.log(Veams.currentMedia);