A mithril component for selectively rendering based on the current viewport dimensions.
$ npm install mithril-media-query --save
import m from 'mithril'
import { MediaQuery, query } from 'mithril-media-query'
// JSX
<MediaQuery type="phone-only">
Howdy
</MediaQuery>
// HyperScript
m( MediaQuery, { type: 'phone-only' }, 'Howdy' )
// Hooks for custom component logic
if ( query.phoneOnly()) console.log( 'This is a phone.' )
mithril-media-query
requires the type
attribute, a string which controls the width threshold for displaying its children.
The following types are available:
'bigDesktopUp'
- Above 1800px'desktopUp'
- Above 1200px'phoneOnly'
- Below 599px'tabletPortraitDown'
- Below 899px'tabletPortraitUp'
- Above 600px'tabletLandscapeDown'
- Below 899px'tabletLandscapeUp'
- Above 600px'landscape'
- Greater than or equal towindow.innerHeight
'portrait'
- Less thanwindow.innerHeight
By default, mithril-media-query
checks against window.innerWidth
, but it can be passed a numerical size
attribute to be tested instead in order to programmatically control rendering.
You can optionally automatically redraw during window resize by enabling the redraw
attribute. Redraws are throttled to once every 150ms.
mithril-media-query
is powered by libmq
, a Javascript library for making media queries. For convenience, libmq
is exposed as query
in mithril-media-query
's named exports.