viewport-mq

Lightweight helper for observing browser's viewport using predefined breakpoints and media queries.

Usage no npm install needed!

<script type="module">
  import viewportMq from 'https://cdn.skypack.dev/viewport-mq';
</script>

README

Viewport

Lightweight helper for observing browser's viewport using predefined breakpoints and media queries.

Examples

Initialize

let View = require('viewport-mq');
let view = new View({ 
  xs: 0, // means 'xs' view goes from 0 to 767px
  sm: 768, // 'sm' is from 768px to 989px etc.
  md: 990, 
  lg: 1200 
})

Attach events and check viewport size

let changeHandler = () => view.lt('sm') ? alert('Mobile') : alert('Desktop');
let eventIndex = view.onChange(changeHandler);

// detach by index
view.offChange(eventIndex);
// or handler
view.offChange(changeHandler);