MediaBreakpoints

JavaScript analog of Bootstrap SCSS media breakpoints mixins.

import MediaBreakpoints from 'media-breakpoints';
 
const mb = new MediaBreakpoints({
  XS: 0,
  SM: 576,
  MD: 768,
  LG: 992,
  XL: 1200,
});
 
mb.is(mb.breakpoints.LG); // @include media-breakpoint-only(lg) { ... }
mb.isUp(mb.breakpoints.LG); // @include media-breakpoint-up(lg) { ... }
mb.isDown(mb.breakpoints.LG); // @include media-breakpoint-down(lg) { ... }
mb.isBetween(mb.breakpoints.SM, mb.breakpoints.LG); // @include media-breakpoint-between(sm, lg) { ... }

Install

npm i -S media-breakpoints

Usage

MediaBreakpoints is a singleton.

// MediaBreakpoints.js
import MediaBreakpoints from 'media-breakpoints';
 
export default new MediaBreakpoints({
  XS: 0,
  SM: 576,
  MD: 768,
  LG: 992,
  XL: 1200,
});

Subscribe on breakpoint changes:

// another-component.js
import mb from './MediaBreakpoints';
 
function handler(state) {
  console.log(state);
  // { current: 'MD', matched: ['XS', 'SM', 'MD'], flow: ['XS', 'SM', 'MD', 'LG', 'XL'] }
}
 
mb.subscribe(handler);
 
// ...
 
mb.unsubscribe(handler);