Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arthurarakelyan/css-unit-converter-js
🧮 A Javascript library which converts all common CSS units.
https://github.com/arthurarakelyan/css-unit-converter-js
Last synced: about 1 month ago
JSON representation
🧮 A Javascript library which converts all common CSS units.
- Host: GitHub
- URL: https://github.com/arthurarakelyan/css-unit-converter-js
- Owner: ArthurArakelyan
- License: mit
- Created: 2024-01-05T18:01:41.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-06-29T08:49:49.000Z (6 months ago)
- Last Synced: 2024-10-01T17:50:26.799Z (3 months ago)
- Language: TypeScript
- Homepage: https://cssunitconverter.vercel.app
- Size: 104 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# css-unit-converter-js
[](https://img.shields.io/npm/dw/css-unit-converter-js)
[](https://img.shields.io/npm/dw/css-unit-converter-js)
[](https://www.npmjs.com/package/css-unit-converter-js)
[](https://www.npmjs.com/package/css-unit-converter-js)
[](https://github.com/ArthurArakelyan/css-unit-converter-js/blob/main/LICENSE)
A lightweight JavaScript library for converting all common CSS units with high accuracy.
## Installation
Add `css-unit-converter-js` to your project with npm
```bash
npm install css-unit-converter-js
```
Or use yarn
```bash
yarn add css-unit-converter-js
```
## Usage
A simple example of conversions
```js
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 applying fractional rounding on conversions
```js
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
```
## Converters
| 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 | mm |
| 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 |
## Communities
[](https://www.reddit.com/r/cssunitconverter/)
## Contributing
Got ideas or bug reports? Open an issue or send a pull request!
## License
MIT