@gondel/plugin-media-queries

!NPM versionnpm-imagenpm-url !Sizesize-imagesize-url !Licenselicense-imagelicense-url !Commitizen friendlycommitizen-imagecommitizen-url

Installation

```js import {initMediaQueriesPlugin} from '@gondel/plugin-media-queries'; initMediaQueriesPlugin({ breakPoints: {

xxsmall: 480,

xsmall: 768,

small: 992,

medium: 1240,

large: 1440,

xlarge: 1920,

xxlarge: Infinity,

} }); ``` Please note: the provided breakpoints need to be the maximum value of each viewport in px.

Viewport entered

```js import { VIEWPORTENTERED } from '@gondel/plugin-media-queries'; ``` The general viewport entered event is fired if the viewport switches into one of the provided breakpoints ```js @EventListener(VIEWPORTENTERED) handleViewportChange(event) {

console.log(event.viewport);

} ```

Restrict to certain viewport

Additionally, the event listener can be restricted to just one specific viewport ```js @EventListener(VIEWPORTENTERED, 'medium') handleViewportChange(event) {

console.log('You are now on the medium viewport');

} ```

getCurrentViewport

```js import { getCurrentViewport } from '@gondel/plugin-media-queries'; ``` Additionally you can always get the current viewport name by using the getCurrentViewport helper. ```js start() { console.log(getCurrentViewport()); // output's e.g. "medium" } ```

Known Issues

The initMediaQueriesPlugin has to be called before you call startComponents.

License

MIT license