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

$3

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

$3

` bash
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

` js
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
});
});
`

$3

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

- mediaQueryProp {String} ['font-family'] - Define a media query property which you have added to the head element.
- delay {Number} [300] - Define the delay value for the throttle handling which is responsible to trigger an event and set the currentMedia value.

$3

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:

` scss
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:

` scss
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:

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

$3

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

` js
console.log(Veams.currentMedia);
``