# ray-mediaquery

> Awesome Media Queries in JavaScript

Latest version **1.1.0** (published 2024-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install ray-mediaquery
pnpm add ray-mediaquery
yarn add ray-mediaquery
bun add ray-mediaquery
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-03-06 |
| First published | 2022-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex.h |
| Maintainers | ilex.h |
| Keywords | media query, media queries, matchMedia |

## Links

- npm: https://www.npmjs.com/package/ray-mediaquery
- Repository: #
- npm.io page: https://npm.io/package/ray-mediaquery

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-03-06
- 1.0.0 — 2022-12-12

## README

# ray-mediaquery - Awesome Media Queries in JavaScript

`ray-mediaquery` is a lightweight, pure javascript library (with **no dependencies**) for programmatically responding to media queries.

## Getting ray-mediaquery


### Install via npm

To install via npm, enter the following at the command line:

    npm install ray-mediaquery

## Quick Start

The main method you will be dealing with is `register`. It's basic signature is as follows:

```javascript
RayMediaquery.register(query /* string */, handler /* object || array  || function */);
```

`query` is the CSS media query you wish to respond to, and `handler` is an object containing any logic to handle the query. An example of usage is as follows:

```javascript
RayMediaquery.register("screen and (max-width:1000px)", {

    match : function() {},      // OPTIONAL
                                // If supplied, triggered when the media query transitions
                                // *from an unmatched to a matched state*

    unmatch : function() {},    // OPTIONAL
                                // If supplied, triggered when the media query transitions
                                // *from a matched state to an unmatched state*.
                                // Also may be called when handler is unregistered (if destroy is not available)

    setup : function() {},      // OPTIONAL
                                // If supplied, triggered once immediately upon registration of the handler

    destroy : function() {},    // OPTIONAL
                                // If supplied, triggered when handler is unregistered. Place cleanup code here

    deferSetup : true           // OPTIONAL, defaults to false
                                // If set to true, defers execution the setup function
                                // until the media query is first matched. still triggered just once
});

// demo2
// Match & Unmatch Example
require('ray-mediaquery')
  .register('only screen and (min-width: 0) and (max-width: 992px)', {
    match: () => {
      this.setState({ menuMode: 'inline' });
    },
    unmatch: () => {
      this.setState({ menuMode: 'horizontal' });
    },
  });

RayMediaquery.register("screen and (orientation: landscape)", {
	match : function() {
		example.match();
	},
	unmatch : function() {
		example.unmatch();
	}
});

// Setup Example
RayMediaquery.register("screen and (orientation: landscape)", {
	setup : function() {
		example.setup();
	},

	match : function() {
		example.match();
	},

	unmatch : function() {
		example.unmatch();
	}
});

// deferSetup Example
RayMediaquery.register("screen and (orientation: landscape)", {
	deferSetup : true,
	setup : function() {
		example.setup();
	},
	match : function() {
		example.match();
	},
	unmatch : function() {
		example.unmatch();
	}
});

// Unregister Example
RayMediaquery.register("screen and (orientation: landscape)", {
	match : function() {
		example.match();
	},
	unmatch : function() {
		example.unmatch();
	},
	destroy : function() {
		example.destroy();
		$(".destroy-trigger").remove();
	}
});

$(".destroy-trigger").click(function() {
	RayMediaquery.unregister("screen and (orientation: landscape)");
});

// shouldDegrade Example
RayMediaquery.register("screen and (min-width: 500000px)", {
	match : function() {
		example.match();
	}
}, true);

```

## License

MIT

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