Skip to content

azazdeaz/match-media-mock

Repository files navigation

MatchMediaMock

Build Status npm

Simple server-side compatible substitution for Window.matchMedia() based on css-mediaquery. Designed for use with Radium.

Basic usage

var matchMediaMock = require('match-media-mock').create()
matchMediaMock.setConfig({type: 'screen', width: 1200})

matchMediaMock('(max-width: 991px)').matches // false
matchMediaMock('(max-width: 1240px)').matches // true

var mediaQueryList = matchMediaMock(mediaQuery)
mediaQueryList.addListener(listener)
mediaQueryList.removeListener(listener)
mediaQueryList.callListeners()

For more details about matching check out css-mediaquery!

Example usage with Radium

var Radium = require('radium')
var matchMediaMock = require('match-media-mock').create()
Radium.config.setMatchMedia(matchMediaMock)

app.get('/app/:width/:height', function(req, res) {
  matchMediaMock.setConfig({
    type: 'screen',
    width: req.params.width,
    height: req.params.height
  })
  var html = React.renderToString(<RadiumApp/>)
  res.end(html)
})

For more details see the Radium docs

About

Server side compatible substitution for Window.matchMedia()

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •