@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

Changelog

1.2.9 (2025-10-08)

Bug Fixes

• correct link to react example (19dbbb3)
• fixed dependency versioning in package.json (84f2dc8)
• four codesandbox-demos during build-process (247f4ad)
• invalid host header issue on codesandbox (a9b09ee), closes #94
• invalid host header issue on codesandbox (95220c1), closes #94
• react-plugin: use correct mime-type for config #80 (20c4938)
• update dependencies (782ec9e)
• update package-lock.json (4983bf4)
• update rollup (aaa1713)
• update typescript (d6da397)
• updated package-lock.json (8689912)