@wide/breakpoint
v2.2.1
Published
Breakpoint observer and helpers
Downloads
475
Keywords
Readme
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