A tiny API wrapper around window.matchMedia
JavaScript
Latest commit fdfbced Jan 13, 2016 andrew-r Update README.md
Permalink
Failed to load latest commit information.
dist Small optimisation Jan 13, 2016
src Small optimisation Jan 13, 2016
.babelrc Initial commit Jan 7, 2016
.editorconfig Initial commit Jan 7, 2016
.gitignore Initial commit Jan 7, 2016
README.md Update README.md Jan 13, 2016
gulpfile.babel.js Initial commit Jan 7, 2016
package.json Update version Jan 13, 2016

README.md

Breakpoint.js

A tiny library to make your JavaScript a bit more responsive

Use this library if you need to do some stuff in dependence on current screen width.

Breakpoint.js uses window.matchMedia, so it supports only IE10+.

✓ Available to use as AMD, CommonJS or ES2015 module
✓ No dependencies
✓ Small size (~350 bytes uncompiled, ~810 bytes compiled)
✓ Just one function, no complicated APIs

Usage

Example is written in ES2015.

import breakpoint from './modules/breakpoint.js';

let config = {
  // media query
  // type: string
  // required
  query: '(min-width: 1024px)',

  // callback to call when the query result is true
  // type: function
  // required
  success: () => console.log('Window width is above 1024px'),

  // function to call when the query result is false
  // type: function
  // optional
  fail: () => console.log('Window width is below 1024px')},

  // context to set on success and fail callbacks
  // type: object
  // default: null
  // optional
  context: window
};

// breakpoint will be automatically listening for changes
let destroyBreakpoint = breakpoint(config);

// if you need to stop listening for changes,
// just call the assigned variable
destroyBreakpoint();