Inglorious WebMediaQuery
MediaQuery keeps window.matchMedia() query results in the store.
What it tracks
The mediaQuery entity keeps:
isSupported— whetherwindow.matchMediais availablematches— whether the media query currently matchesmedia— the media query string being observedisWatching— whether the media query listener is active
Usage
javascript
import { createStore } from "@inglorious/store"
import { MediaQuery } from "@inglorious/web/sensors/media-query"
const store = createStore({
types: { MediaQuery },
autoCreateEntities: true,
})
const mediaQuery = store.getEntity("mediaQuery")
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Example
javascript
if (mediaQuery.matches) {
// use desktop layout
}
1
2
3
2
3