https://github.com/wide/breakpoint
Breakpoint observer and helpers.
https://github.com/wide/breakpoint
modulus
Last synced: 13 days ago
JSON representation
Breakpoint observer and helpers.
- Host: GitHub
- URL: https://github.com/wide/breakpoint
- Owner: wide
- License: mit
- Created: 2020-05-29T14:57:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-06-07T14:53:21.000Z (over 3 years ago)
- Last Synced: 2025-09-15T06:22:08.232Z (5 months ago)
- Topics: modulus
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Breakpoint
Breakpoint observer with helper methods.
## Install
```
npm install @wide/breakpoint --save
```
## Usage
Initialize breakpoint observer with custom sizes:
```js
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:
```js
import emitter from '@wide/emitter'
emitter.on('breakpoint', bp => {})
// or
document.onEvent('breakpoint', bp => {})
```
Listen to specific breakpoint events:
```js
import emitter from '@wide/emitter'
emitter.on('breakpoint.lg', () => {})
// or
document.onEvent('breakpoint.lg', () => {})
```
## Properties
Get current breakpoint:
```js
import { current } from '@wide/breakpoint'
console.log(current) // lg
```
Get all breakpoints for reference:
```js
import { breakpoints } from '@wide/breakpoint'
console.log(breakpoints) // { xs: 326, sm: 576, ... }
```
## Methods
Resolve mobile-first breakpoint:
```js
import { up } from '@wide/breakpoint'
// lg and more : >= 1024
if(up('lg')) {
}
```
Resolve desktop-first breakpoint:
```js
import { down } from '@wide/breakpoint'
// less than lg : < 1024
if(down('lg')) {
}
```
Resolve range breakpoint:
```js
import { between } from '@wide/breakpoint'
// md, lg and xl : >= 768 && < 1600
if(between('md', 'xl')) {
}
```
Resolve range breakpoint (excluding mode):
```js
import { between } from '@wide/breakpoint'
// lg and xl : >= 1024 && < 1600
if(between('md', 'xxl', false)) {
}
```
Resolve one breakpoint only:
```js
import { only } from '@wide/breakpoint'
// lg to xl excluded : >= 1024 && < 1200
if(only('lg')) {
}
```
## Authors
- **Aymeric Assier** - [github.com/myeti](https://github.com/myeti)
- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)
## License
This project is licensed under the MIT License - see the [licence](licence) file for details