https://github.com/dmitrymalakhov/media-breakpoints-watcher

Library for easy use of media breakpoints in js
https://github.com/dmitrymalakhov/media-breakpoints-watcher

breakpoints css-in-js media media-queries

Last synced: about 1 month ago
JSON representation

Library for easy use of media breakpoints in js

• Host: GitHub
• URL: https://github.com/dmitrymalakhov/media-breakpoints-watcher
• Owner: dmitrymalakhov
• License: mit
• Created: 2017-10-27T15:50:21.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-29T23:55:36.000Z (about 7 years ago)
• Last Synced: 2024-11-21T18:39:40.904Z (about 1 month ago)
• Topics: breakpoints, css-in-js, media, media-queries
• Language: JavaScript
• Homepage:
• Size: 62.5 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# media-breakpoints-watcher

Library for easy use of media breakpoints in js

## Install

```bash

yarn add media-breakpoints-watcher

```

or

```bash

npm install media-breakpoints-watcher

```

## Usage

```javascript

import {

  initBreakpoints,

  getBreakpointsBroadcast,

  getBreakpointsEmitter,

  getCurrentBreakpoint,

} from 'media-breakpoints-watcher';

initBreakpoints({

  large: '(min-width: 1200px)',

  medium: '(min-width: 992px)',

  small: '(min-width: 768px)',

});

const breakpointsBroadcast = getBreakpointsBroadcast();

const breakpointsEmitter = getBreakpointsEmitter();

// don't forget to add throttle to handler of resize 

const handleResize = breakpoint => console.log(breakpoint);

breakpointsBroadcast.subscribe(handleResize);

breakpointsEmitter.subscribe('change', handleResize);

breakpointsEmitter.subscribe('small', handleResize);

console.log(

  'Current breakpoint according to init breakpoints',

  getCurrentBreakpoint()

);

console.log(

  'Current breakpoint according to custom breakpoints',

  getCurrentBreakpoint({

    medium: '(min-width: 992px)',

    small: '(min-width: 768px)',

  })

);

```

For unsubscribe

```javascript

const unsubscribe = breakpointsBroadcast.subscribe(handleResize);

unsubscribe();

/../

breakpointsEmitter.subscribe('change', handleResize);

breakpointsEmitter.unsubscribe('change', handleResize);

```