# rvars

> matchMedia based responsive values in JS

Latest version **0.3.2** (published 2023-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install rvars
pnpm add rvars
yarn add rvars
bun add rvars
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2023-02-01 |
| First published | 2022-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tim Morris |
| Maintainers | timthewebguy |

## Links

- npm: https://www.npmjs.com/package/rvars
- Repository: https://github.com/tkofh/rvars
- Homepage: https://github.com/tkofh/rvars/tree/main/packages/rvars#readme
- Issues: https://github.com/tkofh/rvars/issues
- npm.io page: https://npm.io/package/rvars

## Dependencies (1)

- [mitt](https://npm.io/package/mitt.md) ^3.0.0

## Recent versions

- 0.3.2 (latest) — 2023-02-01
- 0.3.1 — 2023-02-01
- 0.3.0 — 2023-01-31
- 0.2.1 — 2022-12-06
- 0.2.0 — 2022-12-06

## README

# rvars

Create responsive JS values based on media query conditions

```typescript
import { defineConditions, createVariable } from 'rvars'

const conditions = defineCondtions({
  breakpoints: {
    mobile: {},
    tablet: { min: 768 },
    desktop: { min: 1280 },
  },

  // optional
  fallback: 'mobile',

  // optional
  responsiveArray: ['mobile', 'tablet', 'desktop'],
})

conditions.normalize(10)
// { mobile: 10, tablet: undefined, laptop: undefined }

conditions.normalize(['small', 'medium', 'large'])
// { mobile: 'small', tablet: 'medium', laptop: 'large' }

conditions.normalize({ tablet: true })
// { mobile: undefined, tablet: true, laptop: true }

conditions.fill({ tablet: true }, false)
// { mobile: false, tablet: true, laptop: true }

conditions.optimize({ mobile: 'large', tablet: 'large', laptop: 'medium' })
// { mobile: 'large', tablet: undefined, laptop: 'medium' }
```

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