# util.calc

> Takes an HTML sizing string and computes a new value

Latest version **0.0.21** (published 2019-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install util.calc
pnpm add util.calc
yarn add util.calc
bun add util.calc
```

## 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.0.21 |
| Published | 2019-12-14 |
| First published | 2017-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=7.x |
| Dependencies | 3 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | jmquigley |
| Maintainers | jmquigley |

## Links

- npm: https://www.npmjs.com/package/util.calc
- Repository: https://github.com/jmquigley/util.calc
- Homepage: https://github.com/jmquigley/util.calc#readme
- Issues: https://github.com/jmquigley/util.calc/issues
- npm.io page: https://npm.io/package/util.calc

## Dependencies (3)

- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.6
- [util.toolbox](https://npm.io/package/util.toolbox.md) ^0.0.86
- [util.constants](https://npm.io/package/util.constants.md) ^0.0.30

## Recent versions

- 0.0.21 (latest) — 2019-12-14
- 0.0.20 — 2019-04-29
- 0.0.19 — 2019-04-29
- 0.0.18 — 2019-04-29
- 0.0.17 — 2019-03-13
- 0.0.16 — 2019-03-08
- 0.0.15 — 2019-03-01
- 0.0.14 — 2019-02-18
- 0.0.13 — 2019-01-27
- 0.0.12 — 2019-01-27
- 0.0.11 — 2019-01-08
- 0.0.10 — 2018-04-25
- 0.0.9 — 2018-04-19
- 0.0.8 — 2017-12-14
- 0.0.7 — 2017-12-04
- … 6 more at https://npm.io/package/util.calc/versions

## README

# util.calc

> Takes an HTML sizing string and computes a new value

[![build](https://github.com/jmquigley/util.calc/workflows/build/badge.svg)](https://github.com/jmquigley/util.calc/actions)
[![analysis](https://img.shields.io/badge/analysis-tslint-9cf.svg)](https://palantir.github.io/tslint/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![testing](https://img.shields.io/badge/testing-jest-blue.svg)](https://facebook.github.io/jest/)
[![NPM](https://img.shields.io/npm/v/util.calc.svg)](https://www.npmjs.com/package/util.calc)


## Installation

This module uses [yarn](https://yarnpkg.com/en/) to manage dependencies and run scripts for development.

To install as an application dependency:
```
$ yarn add --dev util.calc
```

To build the app and run all tests:
```
$ yarn run all
```


## Overview
Takes an HTML width/size string and performs a calcuation to scale it.  This would be used to dynamically size an attribute for inline styles in a React component (e.g.).  It uses four basic operations (addition, subtraction multiplication, and division).

e.g.

taking "20px" and doubling its size:

```javascxript
calc('20px', '* 2'); // '40px'
```

The module also contains two helper methods named [toEM()](docs/index.md#toEM) and [toREM()](docs/index.md#toREM) for converting a sizing value from pixels to [EM/REM](https://zellwk.com/blog/rem-vs-em/).


## Usage (calc)
Exposes a function named [calc()](docs/index.md#calc).  It will take an HTML size string or a number and perform one of four basic operations:


#### Addition

```javascript
import {calc} from 'util.calc';
calc('20px', '+ 5'); // 25px
```

#### Subtraction

```javascript
import {calc} from 'util.calc';
calc('20px', '- 5'); // 15px
```

#### Multiplication

```javascript
import {calc} from 'util.calc';
calc('20px', '* 2'); // 40px
```

#### Division

```javascript
import {calc} from 'util.calc';
calc('20px', '/ 4'); // 5px
```

## Usage (toREM/toEM/unitToNumber)

```javascript
import {toREM, toEM} from 'util.calc';
toREM('80px', 16, 3); // '5rem'
toEM('80px', 16, 3);  // '5em'
```

Both functions take a pixel sizing value, the font size (default 16), and the maximum digits of precision (default 3).  This example rounds perfectly, so there is no decimal portion.  A simpler way to do the same thing would be:

```javascript
import {toREM, toEM} from 'util.calc';
toREM('80px'); // '5rem'
toEM('80px');  // '5em'
```

The next example shows the precision value when the font size does not divide evenly into the given pixel size:

```javascript
import {toREM, toEM} from 'util.calc';
toREM('79px'); // '4.938rem'
toEM('79px');  // '4.938em'
```

The last example converts a unit string into a number:

```javascript
import {unitToNumber} from 'util.calc';
unitToNumber("24px");     // 24
unitToNumber("1.5rem");   // 1.5
```

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