Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daun/mq-observer
Simple media query observer
https://github.com/daun/mq-observer
css javascript media-queries
Last synced: 1 day ago
JSON representation
Simple media query observer
- Host: GitHub
- URL: https://github.com/daun/mq-observer
- Owner: daun
- License: mit
- Created: 2020-07-27T17:39:54.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-10-20T17:43:54.000Z (over 4 years ago)
- Last Synced: 2025-01-05T08:30:06.942Z (28 days ago)
- Topics: css, javascript, media-queries
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Media Query Observer
Simple media query observer.
Wraps the wonderful
[enquire.js](https://github.com/WickyNilliams/enquire.js),
with a few additions:
- Use named queries
- Add default queries: `landscape`, `portrait`, `dark`
- Allow number-only queries like `1024` or `60em`
## Installation
```bash
npm install mq-observer
```
## Usage
```js
import observer from 'mq-observer'
```
### Adding queries
```js
observer.add({
'multi-col-content': 768,
'floating-nav': 1024
})
```
### Matching queries
```js
if (observer.matches('multi-col-content')) {
// Run code for multi-col layout
}
```
### Observing queries
See the [enquire.js docs](https://wicky.nillia.ms/enquire.js/) for details on
registering handlers.
```js
observer.register('multi-col-content', {
match() {
/* Init */
},
unmatch() {
/* Teardown */
}
})
```
### Killing observers
Registering an observer returns a handle that can be used to unregister it
later.
```js
// Register handler
const unregister = observer.register('query', {})
// Kill handler
unregister()
```
### Default queries
- landscape: `orientation: landscape`
- portrait: `orientation: portrait`
- dark: `prefers-color-scheme: dark`
### Supported query formats
- Fully qualified: `screen and (min-width: 1000px)`
- Condition only: `(min-width: 1000px)`
- Width only: `1000px`, `1000`
### Sharing media queries between SCSS & JS
See [icss-js](https://github.com/daun/icss-js) for a possible solution to
importing named media queries from SCSS.
## License
[MIT License](https://opensource.org/licenses/MIT) © Philipp Daun