https://github.com/delete-agency/device-observer
https://github.com/delete-agency/device-observer
devices resizeobserver
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/delete-agency/device-observer
- Owner: Delete-Agency
- License: mit
- Created: 2019-09-13T06:58:10.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:09:22.000Z (over 3 years ago)
- Last Synced: 2025-03-22T13:34:09.853Z (about 1 year ago)
- Topics: devices, resizeobserver
- Language: TypeScript
- Size: 1.48 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Device Observer
When you style you components in CSS using media queries it's quite often when for a particular component CSS
is just not powerful enough to fulfill you needs.
Then you have to use JS for that purpose so you copy your breakpoint and use something like
window.addEventListener('resize', ...) and rely on window.outerWidth/innerWidth.
Besides in some cases window.outerWidth/innerWidth can be inconsistent in different browsers (see [here](https://delete-agency.github.io/device-observer/examples/window-width-test.html))
so relying on them is not very safe, adding another addEventListener and "window.innerWidth > 1280"
just makes your code less maintainable.
Device Observer allows you to configure your breakpoints once and then write media queries conditions in JS the same way you are used to in CSS
It uses window.matchMedia that always returns correct results.
Supports both mobile and desktop-first approaches (can be configured via options).
[Live Demo](https://delete-agency.github.io/device-observer/)
## Installation
Use the package manager [npm](https://docs.npmjs.com/about-npm/) for installation.
```
$ npm install @deleteagency/device-observer
```
## Usage
```js
const devices = {
'mobile': 0,
'tablet': 768,
'desktop': 1024,
}
const deviceObserver = new DeviceObserver(devices)
deviceObserver.subscribeOnResize(() => {
// this will triggered not more than ones at 50ms by default
console.log('Do some logic on every resize');
});
deviceObserver.subscribeOnChange((newDevice, oldDevice) => {
if (deviceObserver.is('<', 'desktop')) {
console.log('Do some logic for smaller devices');
} else {
console.log('Do some logic for bigger devices');
}
});
```
## API
### constructor(devices, options = {})
Sets options described in Options section
#### options
*Required*
Type: `Object`
##### resizeDebounce
Debounce time in milliseconds for handling window resize event.
Default value - `50`.
Type: number
##### mobileFirst
Whether to use mobileFirst approach in current device determining.
Default value - `true`.
Type: `Boolean`
### subscribeOnResize(cb)
Subscribe on viewport changing with debounce time. Passed callback function will be called every time viewport is changes
#### cb
*Required*
Type: `(currentDevice) => void`
### subscribeOnChange(cb)
Subscribe on device change. Passed callback function will be called every time device is changes
(in terms of user devices passed as the first argument to deviceObserver.init())
#### cb
*Required*
Type: `(newDevice, oldDevice) => void`
### is(operator, deviceName)
Returns `Boolean`
Just an alias for the above methods
#### operator
*Required*
Type: `string`
Allowed values: '=', '>', '>=', '<', '<='
#### deviceName
*Required*
Type: `string`
## License
[MIT](https://choosealicense.com/licenses/mit/)