# js-media-queries

> Media queries in JS

Latest version **1.1.0** (published 2018-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install js-media-queries
pnpm add js-media-queries
yarn add js-media-queries
bun add js-media-queries
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-03-18 |
| First published | 2017-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Tuqire hussain |
| Maintainers | tuqire |
| Keywords | JS media queries |

## Links

- npm: https://www.npmjs.com/package/js-media-queries
- Repository: https://github.com/tuqire/js-media-queries
- Homepage: https://github.com/tuqire/js-media-queries#readme
- Issues: https://github.com/tuqire/js-media-queries/issues
- npm.io page: https://npm.io/package/js-media-queries

## Recent versions

- 1.1.0 (latest) — 2018-03-18
- 1.0.3 — 2018-03-04
- 1.0.2 — 2018-03-04
- 1.0.1 — 2017-09-27
- 1.0.0 — 2017-09-27

## README

# JS Media Queries

Allows the use of media queries in javascript. Caches result on first call, and then updates the value on window resize event.


## How it Works

Example use case.

```js
import setMediaQueries from 'js-media-queries';

// The media queries to register
// Must have a key registered for 0px
// Must be numbers only
const mediaQueries = {
  xxs: 0,
  xs: 320,
  s: 480,
  m: 768,
  l: 1024,
  xl: 1224,
  xxl: 1824
};

const getBreakPoint = setMediaQueries(mediaQueries);

// Call getBreakPoint to get the current break point
// The break point is cached and recalculated when the window is resized
// will return the key of the breakpoint (xxs, xs, s, m, l, xl)
const breakPoint = getBreakPoint();

// Example use case
const screenSize = {
  xxs: 'small screen mobile',
  xs: 'medium screen mobile',
  s: 'large screen mobile',
  m: 'iPad',
  l: 'small screen desktop',
  xl: 'medium screen desktop',
  xxl: 'large screen desktop'
};

console.log(`You are currently on a ${screenSize[breakPoint]}`);

```

## Todo

1. Add unit tests

## Contributors

* Tuqire Hussain <me@tuqire.com>

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