@wide/breakpoint

Breakpoint

Breakpoint observer with helper methods.

Install

npm install @wide/breakpoint --save

Usage

Initialize breakpoint observer with custom sizes:

import breakpoint from '@wide/breakpoint'

breakpoint({
  xs: 326,
  sm: 576,
  md: 768,
  lg: 1024,
  xl: 1200,
  xxl: 1600
})

Events

On window resize, a breakpoint event will be triggered if the breakpoint change according to your config:

import emitter from '@wide/emitter'

emitter.on('breakpoint', bp => {})

// or
document.onEvent('breakpoint', bp => {})

Listen to specific breakpoint events:

import emitter from '@wide/emitter'

emitter.on('breakpoint.lg', () => {})

// or
document.onEvent('breakpoint.lg', () => {})

Properties

Get current breakpoint:

import { current } from '@wide/breakpoint'

console.log(current) // lg

Get all breakpoints for reference:

import { breakpoints } from '@wide/breakpoint'

console.log(breakpoints) // { xs: 326, sm: 576, ... }

Methods

Resolve mobile-first breakpoint:

import { up } from '@wide/breakpoint'

// lg and more : >= 1024
if(up('lg')) {

}

Resolve desktop-first breakpoint:

import { down } from '@wide/breakpoint'

// less than lg : < 1024
if(down('lg')) {

}

Resolve range breakpoint:

import { between } from '@wide/breakpoint'

// md, lg and xl : >= 768 && < 1600
if(between('md', 'xl')) {

}

Resolve range breakpoint (excluding mode):

import { between } from '@wide/breakpoint'

// lg and xl : >= 1024 && < 1600
if(between('md', 'xxl', false)) {

}

Resolve one breakpoint only:

import { only } from '@wide/breakpoint'

// lg to xl excluded : >= 1024 && < 1200
if(only('lg')) {

}

Authors

• Aymeric Assier - github.com/myeti
• Julien Martins Da Costa - github.com/jdacosta

License

This project is licensed under the MIT License - see the licence file for details