1.0.2 • Published 9 months ago

css-unit-manager v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

CSSUnitManager

A TypeScript utility for converting between CSS units dynamically.

Installation

npm install css-unit-manager

Usage

import unit, { CSSUnitManager } from "css-unit-manager";

// Create a new instance
const unitManager = new CSSUnitManager(16, "px");

// Convert to another unit
const remValue = unitManager.toUnit("rem").toString(); // "1rem"

// Add a custom unit
CSSUnitManager.addUnit("myUnit", {
  px: 2, // 1 myUnit = 2px
  em: 0.125, // 1 myUnit = 0.125em
});

// Parse from string
const parsedUnit = unit("20px");

// Perform arithmetic operations
const result = unitManager.add(10).multiply(2).toString(); // "52px"

// Reset to initial value
unitManager.reset();

// Convert to a fixed number of decimals
unitManager.toFixed(2);

// Clamp value between a range
unitManager.clamp(10, 50);

// Output as string
console.log(unitManager.toString()); // "16px"

API

Constructor

new CSSUnitManager(value: number, unit: string);
  • value: The numeric value.
  • unit: The CSS unit (e.g., px, em, rem, vw, vh, etc.).

Static Methods

  • CSSUnitManager.isValidUnit(unit: string): boolean: Check if the unit is valid.
  • CSSUnitManager.addUnit(unit: string, conversionRates: { key: string: number | (() => number) }): void: Add a custom unit with conversion rates.
  • CSSUnitManager.fromString(cssString: string): CSSUnitManager: Parse a CSS string (e.g., "20px") into an instance of CSSUnitManager.

Instance Methods

  • .toUnit(targetUnit: string): CSSUnitManager: Convert the current value to another unit.
  • .toFixed(digits: number): void: Round the value to a fixed number of decimal places.
  • .add(value: number, unit?: string): this: Add another value (optionally with a different unit).
  • .subtract(value: number, unit?: string): this: Subtract another value (optionally with a different unit).
  • .multiply(factor: number): this: Multiply the value by a factor.
  • .divide(factor: number): this: Divide the value by a factor.
  • .clamp(min: number, max: number): this: Clamp the value between min and max.
  • .min(value: number, unit?: string): this: Set the value to the minimum of the current and the provided value.
  • .max(value: number, unit?: string): this: Set the value to the maximum of the current and the provided value.
  • .normalize(min?: number, max?: number): this: Normalize the value between min and max (default: 0 to 100).
  • .toAuto(): string: Set the value to "auto".
  • .reset(): this: Reset the value to the initial one.
  • .toString(): string: Return the value as a string with the unit.
  • .toNumber(): number: Return the value as a number.
  • .isEqual(other: CSSUnitManager): boolean: Check if two instances are equal (after unit conversion).