css-unit-converter-js NPM Package Release

Posted on • Updated on

css-unit-converter-js NPM Package Release

#javascript#typescript#css#webdev

Meet our new JavaScript library which allows you to convert all common Cascading Style Sheet units with high accuracy. It provides many JavaScript methods for converting units from one to another. The library supports almost all CSS units.


The library is written with TypeScript for better development experience.


Check out the library page in npm.js


Check out the library page in GitHub


Usage


A simple example of usage in JavaScript


import { pxToRem, remToPx, pxToVw } from 'css-unit-converter-js';

// Convert px to rem based on rem size (By default 16px)
pxToRem(24); // => 1.5

// Convert rem to px based on rem size (By default 16px)
remToPx(1.5); // => 24

// Convert px to rem based on provided rem size (32px)
pxToRem(16, 32); // => 0.5

// Convert px to vw based on provided viewport width (1920px)
  pxToVw(192, 1920); // => 10

An example of advanced usage by applying fractional rounding


import { pxToVw } from 'css-unit-converter-js';

// By default, it applies fractional rounding up to 3 digits
pxToVw(23, 1920); // => 1.198

// Change fractional rounding
pxToVw(23, 1920, { fractionDigits: 5 }); // => 1.19792

// Disable fractional rounding
pxToVw(23, 1920, { fraction: false }); // => 1.1979166666666667

Features


Here is the list of methods for unit conversions which provides library.


Converter - The name of method


Arguments - The list of arguments which the method accepts for converting


Converter Arguments
pxToRem px, remSize
pxToEm px, emSize
pxToVw px, viewportWidth
pxToVh px, viewportHeight
pxToPt px
pxToIn px
pxToPc px
pxToCm px
pxToMm px
pxToPercentage px, base
remToPx rem, remSize
remToEm rem, remSize, emSize
remToVw rem, remSize, viewportWidth
remToVh rem, remSize, viewportHeight
remToPt rem, remSize
remToIn rem, remSize
remToPc rem, remSize
remToCm rem, remSize
remToMm rem, remSize
remToPercentage rem, remSize, base
emToPx em, emSize
emToRem em, emSize, remSize
emToVw em, emSize, viewportWidth
emToVh em, emSize, viewportHeight
emToPt em, emSize
emToIn em, emSize
emToPc em, emSize
emToCm em, emSize
emToMm em, emSize
emToPercentage em, emSize, base
vwToPx vw, viewportWidth
vwToRem vw, viewportWidth, remSize
vwToEm vw, viewportWidth, emSize
vwToVh vw, viewportWidth, viewportHeight
vwToPt vw, viewportWidth
vwToIn vw, viewportWidth
vwToPc vw, viewportWidth
vwToCm vw, viewportWidth
vwToMm vw, viewportWidth
vwToPercentage vw, viewportWidth, base
vhToPx vh, viewportHeight
vhToRem vh, viewportHeight, remSize
vhToEm vh, viewportHeight, emSize
vhToVw vh, viewportHeight, viewportWidth
vhToPt vh, viewportHeight
vhToIn vh, viewportHeight
vhToPc vh, viewportHeight
vhToCm vh, viewportHeight
vhToMm vh, viewportHeight
vhToPercentage vh, viewportHeight, base
ptToPx pt
ptToRem pt, remSize
ptToEm pt, emSize
ptToVw pt, viewportWidth
ptToVh pt, viewportHeight
ptToIn pt
ptToPc pt
ptToCm pt
ptToMm pt
ptToPercentage pt, base
inToPx inch
inToRem inch, remSize
inToEm inch, emSize
inToVw inch, viewportWidth
inToVh inch, viewportHeight
inToPt inch
inToPc inch
inToCm inch
inToMm inch
inToPercentage inch, base
pcToPx pc
pcToRem pc, remSize
pcToEm pc, emSize
pcToVw pc, viewportWidth
pcToVh pc, viewportHeight
pcToPt pc
pcToIn pc
pcToCm pc
pcToMm pc
pcToPercentage pc, base
cmToPx cm
cmToRem cm, remSize
cmToEm cm, emSize
cmToVw cm, viewportWidth
cmToVh cm, viewportHeight
cmToPt cm
cmToIn cm
cmToPc cm
cmToMm cm
cmToPercentage cm, base
mmToPx mm
mmToRem mm, remSize
mmToEm mm, emSize
mmToVw mm, viewportWidth
mmToVh mm, viewportHeight
mmToPt mm
mmToIn mm
mmToPc cm
mmToCm mm
mmToPercentage mm, base
percentageToPx percent, base
percentageToRem percent, base, remSize
percentageToEm percent, base, emSize
percentageToVw percent, base, viewportWidth
percentageToVh percent, base, viewportHeight
percentageToPt percent, base
percentageToIn percent, base
percentageToPc percent, base
percentageToCm percent, base
percentageToMm percent, base

Conclusion


We made a very useful feature for front-end developers, to make CSS unit conversion faster and easier in JavaScript. If you have any questions or concerns, please feel free to Contact Us. Hope you will enjoy this library.