https://github.com/andrew--r/breakpoint

A tiny API wrapper around window.matchMedia
https://github.com/andrew--r/breakpoint

api-wrapper media-queries microjs

Last synced: about 6 hours ago
JSON representation

A tiny API wrapper around window.matchMedia

• Host: GitHub
• URL: https://github.com/andrew--r/breakpoint
• Owner: andrew--r
• Created: 2016-01-07T14:32:25.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-13T02:56:37.000Z (almost 9 years ago)
• Last Synced: 2024-11-14T04:03:49.575Z (5 days ago)
• Topics: api-wrapper, media-queries, microjs
• Language: JavaScript
• Homepage: http://andrew--r.github.io/breakpoint/
• Size: 28.3 KB
• Stars: 35
• Watchers: 8
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](http://caniuse.com/#feat=matchmedia) 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.

```javascript

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();

```