@gondel/plugin-media-queries

MediaQueries Plugin

Installation

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

  import { VIEWPORT_ENTERED } from '@gondel/plugin-media-queries';

The general viewport entered event is fired if the viewport switches into one of the provided breakpoints

  @EventListener(VIEWPORT_ENTERED)
  handleViewportChange(event) {
     console.log(event.viewport);
  }

Restrict to certain viewport

Additionally, the event listener can be restricted to just one specific viewport

  @EventListener(VIEWPORT_ENTERED, 'medium')
  handleViewportChange(event) {
     console.log('You are now on the medium viewport');
  }

getCurrentViewport

  import { getCurrentViewport } from '@gondel/plugin-media-queries';

Additionally you can always get the current viewport name by using the getCurrentViewport helper.

start() {
  console.log(getCurrentViewport());
  // output's e.g. "medium"
}

Known Issues

The initMediaQueriesPlugin has to be called before you call startComponents.

License

MIT license