Created
August 27, 2022 11:37
-
-
Save neharkarvishal/87fed9eafb0aea5480e791e27e2764e0 to your computer and use it in GitHub Desktop.
Media Queries in CSS, JavaScript and with RxJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 ;) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment