1.0.1 • Published 5 months ago
mq-overlay v1.0.1
MQ Overlay
Overlay showing your media queries for development.
Install the package
npm install mq-overlay --save-dev
…or
yarn add mq-overlay --dev
Import 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 |