Provide a custom gondel event which will fire once a given media query is met

Downloads in past


3711.2.72 years ago5 years agoMinified + gzip package size for @gondel/plugin-media-queries in KB


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


```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) {
} ```

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


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


MIT license