util.calc

Takes an HTML sizing string and computes a new value

Installation

This module uses yarn 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:

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

The module also contains two helper methods named toEM() and toREM() for converting a sizing value from pixels to EM/REM.

Usage (calc)

Exposes a function named calc(). It will take an HTML size string or a number and perform one of four basic operations:

Addition

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

Subtraction

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

Multiplication

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

Division

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

Usage (toREM/toEM/unitToNumber)

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:

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:

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

The last example converts a unit string into a number:

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