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
;; // 25px
Subtraction
;; // 15px
Multiplication
;; // 40px
Division
;; // 5px
Usage (toREM/toEM/unitToNumber)
;; // '5rem'; // '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:
;; // '5rem'; // '5em'
The next example shows the precision value when the font size does not divide evenly into the given pixel size:
;; // '4.938rem'; // '4.938em'
The last example converts a unit string into a number:
;; // 24; // 1.5