Match Media Breakpoint

Work with breakpoints through matchMedia.

Demo and examples

Demo

VueJs simple example

Install

via NPM

npm install match-media-breakpoint --save

Usage

Define new instance of MatchMediaBreakpoint with providing breakpoints array at first parametr and callback as second parametr.

The array of breakpoints should consist of objects, the first property of which is the name of the breakpoint, and the second is the value from which the current breakpoint begins. For example:

import { MatchMediaBreakpoint } from 'match-media-breakpoint';

const breakpoints = [
  { breakpoint: 'mobile', width: 0 },
  { breakpoint: 'tablet', width: 768 },
  { breakpoint: 'laptop', width: 1180 },
  { breakpoint: 'desktop', width: 1440 },
];

const matchMediaBreakpoint = new MatchMediaBreakpoint({
  breakpoints, 
  onBreakpointChange: (currentBreakpoint, previousBreakpoint) => {
    console.log({ currentBreakpoint, previousBreakpoint });
  },
});

Properties

value

matchMediaBreakpoint.value // return current breakpoint

previousValue

matchMediaBreakpoint.previousValue // return previous breakpoint

Methods

subscribe()

matchMediaBreakpoint.subscribe(handler) // add listener. The hander will be called with the previous and current breakpoint as parameters at each breakpoint change

unsubscribe()

matchMediaBreakpoint.subscribe(handler) // remove listener.

destroy()

matchMediaBreakpoint.destroy() // remove all listeners

License

This project is licensed under the MIT license, Copyright (c) 2018 karambafe. For more information see LICENSE.