Posted on • Updated on
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.