Branch: master
Find file Copy path
65640d3 Oct 3, 2018
2 contributors

Users who have contributed to this file

@keanulee @e111077
29 lines (24 sloc) 1.21 KB
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at
Utility method that calls a callback whenever a media-query matches in response
to the viewport size changing. The callback should take a boolean parameter
(with `true` meaning the media query is matched).
import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
installMediaQueryWatcher(`(min-width: 600px)`, (matches) => {
console.log(matches ? 'wide screen' : 'narrow sreen');
export const installMediaQueryWatcher = (mediaQuery: string, layoutChangedCallback: (mediaQueryMatches: boolean) => void) => {
let mql = window.matchMedia(mediaQuery);
mql.addListener((e) => layoutChangedCallback(e.matches));