Media Queries in CSS, JavaScript and with RxJS

media.js

/**
 * The vanilla javascript way of implementing such a functionality would be to use
 * he window's matchMedia function. The function takes a string query and
 * returns a MediaQueryList that can be used to get the current result of the
 * query and listen to changes of the media query.
 */

const mediaQueryList = window.matchMedia(`(min-width: 767px)`);

console.log(mediaQueryList.matches); // true or false

mediaQueryList.addEventListener('change', (event) =>
  console.log(event.matches) // true or false
);

// don't forget to remove the event listener ;)

media.ts

/**
 * To neatly integrate Media Queries in my workflow we can came up with the media Observable.
 * We use RxJS fromEvent Observable creation function to listen for all changes
 * to the MediaQueryList. To get the inital MediaQueryList, we use the
 * startWith operator. The MediaQueryList is then mapped to the actual result
 * of the query by using the matches function.
 * 
 * The media function returns a Observable stream which can be used to subscribe to the current
 * state and future changes of the media query.
 */

import { fromEvent, Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

export function media(query: string): Observable<boolean> {
  const mediaQuery = window.matchMedia(query);
  return fromEvent<MediaQueryList>(mediaQuery, 'change').pipe(
    startWith(mediaQuery),
    map((list: MediaQueryList) => list.matches)
  );
}

// Usage
media('(max-width: 767px)').subscribe((matches) =>
  console.log(matches) // true or false
);

styles.css

/**
 * Media Queries in CS, Media Queries are essential tools when building responsive layouts on the web.
 * They are commonly used to hide / show / alter parts of the UI depending on the viewport dimensions or
 * to switch between themes based on user preferences (e.g. Darkmode 🌙).
 * In CSS Media Queries are used like so.
 */

@media (max-width: 767px) {
  /* apply styles */
}