css-unit-converter-js NPM Package Release

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.