mobx-respond v0.1.0

mobx-respond

Responsive web design script with mobx. The goal of this lib is to provide a CSS3 min/max-width media query like function in javascript, so you can perform different action in different size of screen. So you can do things easily like:

• show custom message when viewport is too small.
• jump to mobile version site when viewport is too small.

Installation

Using npm or yarn:

$ npm install --save mobx-respond
or
$ yarn add mobx-respond

Use CDN

• Include mobx first https://unpkg.com/mobx/lib/mobx.umd.js
• Then include https://unpkg.com/mobx-respond/umd/mobx-respond.js

Then get the respond class:

// using ES6 modules
import Respond from 'mobx-respond'

// using CommonJS modules
var Respond = require('mobx-respond').Respond

// using CDN
var Respond = mobxRespond.Respond

var respond = new Respond()

Usage

• construtor(config)

default config is

{
    xs: [null, 767],
    sm: [768, 991],
    md: [992, 1199],
    lg: [1200, null],
};

Props

• getter width
• type: number

Width of current viewport

• getter height
• type: number

Height of current viewport

• getter XXX
• type: boolean

Whether current viewport satisfied the configuration of XXX

Demo