MQ Overlay
Overlay showing your media queries for development.
Install the package
npm install mq-overlay --save-dev…or
yarn add mq-overlay --devImport and initialize it:
import MqOverlay from "./mq-overlay.js"
const overlay = new MqOverlay({
sizes: {
"screen-xs": 360,
"screen-sm": 768,
"screen-md": 1024,
"screen-lg": 1200,
"screen-xl": 1440,
},
autoHide: false,
})To make sure you only see the overlay in development, you can use the NODE_ENV variable:
if (process.env.NODE_ENV === "development") {
const overlay = new MqOverlay({
sizes: {
"screen-xs": 360,
"screen-sm": 768,
"screen-md": 1024,
"screen-lg": 1200,
"screen-xl": 1440,
},
autoHide: false,
})
}Options
| Option | Type | Default | Description |
|---|---|---|---|
sizes |
object |
undefined |
An object with {name: value} |
autoHide |
boolean |
false |
Auto hide the overlay |