# match-media-screen

> Observe window.resize and fire corresponding events with given object data.

Latest version **0.0.3** (published 2022-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install match-media-screen
pnpm add match-media-screen
yarn add match-media-screen
bun add match-media-screen
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-11-14 |
| First published | 2022-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | phucbm |
| Maintainers | phucbm |
| Keywords | phucbm, resize, match-media, es6 |

## Links

- npm: https://www.npmjs.com/package/match-media-screen
- Repository: https://github.com/phucbm/match-media-screen
- Issues: https://github.com/phucbm/match-media-screen/issues
- npm.io page: https://npm.io/package/match-media-screen

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2022-11-14
- 0.0.2 — 2022-11-14
- 0.0.1 — 2022-11-10

## README

# Match Media Screen

[![release](https://badgen.net/github/release/phucbm/match-media-screen/)](https://github.com/phucbm/match-media-screen/releases/latest)
[![minified](https://badgen.net/badge/minified/3KB/cyan)](https://www.jsdelivr.com/package/gh/phucbm/match-media-screen)
[![jsdelivr](https://data.jsdelivr.com/v1/package/gh/phucbm/match-media-screen/badge?style=rounded)](https://www.jsdelivr.com/package/gh/phucbm/match-media-screen)
[![license](https://badgen.net/github/license/phucbm/match-media-screen/)](https://github.com/phucbm/match-media-screen/blob/main/LICENSE)
[![Netlify Status](https://api.netlify.com/api/v1/badges/1cc036c8-c6d1-4404-adbd-52182abbdd78/deploy-status)](https://app.netlify.com/sites/match-media-screen/deploys)

> Observe window.resize and fire corresponding events with given object data.

## Installation

### NPM Package

Install NPM package

```shell
npm i match-media-screen
```

Import

```js
import {MatchMediaScreen} from "match-media-screen";
```

### Download

👉 Self hosted - [Download the latest release](https://github.com/phucbm/match-media-screen/releases/latest)

```html

<script src="./match-media-screen.min.js"></script>
```

👉 CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/gh/phucbm/match-media-screen)

```html

<script src="https://cdn.jsdelivr.net/gh/phucbm/match-media-screen/dist/match-media-screen.min.js"></script>
```

## Usage

Demo: https://match-media-screen.netlify.app

```js
new MatchMediaScreen({
    object: {
        value: 'desktop',
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    value: 'tablet',
                }
            },
            {
                breakpoint: 480,
                settings: {
                    value: 'mobile',
                }
            }
        ],
    },
    debounce: 100, // [ms] debounce time on resize event
    // fire everytime a matched breakpoint is found
    onMatched: data => {
        console.table(data)
        document.querySelector('[data-code]').innerHTML = JSON.stringify(data);
    },
    // fire on every resize event with debouce time of 100ms
    onUpdate: data => {
        console.log(data)
    }
});
```

## Deployment

### Dev server

Run dev server

```shell
npm run dev
```

### Generate production files

Generate UMD and module version

```shell
npm run prod
```

### Build sites

Build production site

```shell
npm run build
```

## License

[MIT License](https://github.com/phucbm/match-media-screen/blob/main/LICENSE)

Copyright (c) 2022 Phuc Bui

---
_Source: https://npm.io/package/match-media-screen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._