tessl/npm-vueuse--math

Reactive mathematical utility functions and composables for Vue.js applications

—

Pending

Overview

Eval results

Files

Basic Math Operations

Name: tessl/npm-vueuse--math
Author: tessl

Reactive wrappers for fundamental JavaScript Math methods providing automatic reactivity for absolute value, ceiling, floor, rounding, and truncation operations.

Capabilities

useAbs

Reactive wrapper for Math.abs() that returns the absolute value of a number.

/**
 * Reactive Math.abs - returns absolute value of a number
 * @param value - The number to get absolute value of
 * @returns ComputedRef containing the absolute value
 */
function useAbs(value: MaybeRefOrGetter<number>): ComputedRef<number>;

Usage Examples:

import { ref } from "vue";
import { useAbs } from "@vueuse/math";

const value = ref(-42);
const absolute = useAbs(value);

console.log(absolute.value); // 42

value.value = -100;
console.log(absolute.value); // 100 (automatically updated)

// Works with getters
const computed = useAbs(() => Math.sin(Date.now()));

useCeil

Reactive wrapper for Math.ceil() that rounds a number up to the nearest integer.

/**
 * Reactive Math.ceil - rounds number up to nearest integer
 * @param value - The number to round up
 * @returns ComputedRef containing the ceiling value
 */
function useCeil(value: MaybeRefOrGetter<number>): ComputedRef<number>;

Usage Examples:

import { ref } from "vue";
import { useCeil } from "@vueuse/math";

const value = ref(4.3);
const ceiling = useCeil(value);

console.log(ceiling.value); // 5

value.value = -2.7;
console.log(ceiling.value); // -2

useFloor

Reactive wrapper for Math.floor() that rounds a number down to the nearest integer.

/**
 * Reactive Math.floor - rounds number down to nearest integer
 * @param value - The number to round down
 * @returns ComputedRef containing the floor value
 */
function useFloor(value: MaybeRefOrGetter<number>): ComputedRef<number>;

Usage Examples:

import { ref } from "vue";
import { useFloor } from "@vueuse/math";

const value = ref(4.9);
const floor = useFloor(value);

console.log(floor.value); // 4

value.value = -2.1;
console.log(floor.value); // -3

useRound

Reactive wrapper for Math.round() that rounds a number to the nearest integer.

/**
 * Reactive Math.round - rounds number to nearest integer
 * @param value - The number to round
 * @returns ComputedRef containing the rounded value
 */
function useRound(value: MaybeRefOrGetter<number>): ComputedRef<number>;

Usage Examples:

import { ref } from "vue";
import { useRound } from "@vueuse/math";

const value = ref(4.6);
const rounded = useRound(value);

console.log(rounded.value); // 5

value.value = 4.4;
console.log(rounded.value); // 4

value.value = -2.6;
console.log(rounded.value); // -3

useTrunc

Reactive wrapper for Math.trunc() that removes the decimal part of a number, returning only the integer part.

/**
 * Reactive Math.trunc - truncates decimal part of number
 * @param value - The number to truncate
 * @returns ComputedRef containing the truncated value
 */
function useTrunc(value: MaybeRefOrGetter<number>): ComputedRef<number>;

Usage Examples:

import { ref } from "vue";
import { useTrunc } from "@vueuse/math";

const value = ref(4.9);
const truncated = useTrunc(value);

console.log(truncated.value); // 4

value.value = -4.9;
console.log(truncated.value); // -4 (different from floor for negative numbers)

Common Patterns

All basic math functions follow the same reactive pattern:

import { ref, watchEffect } from "vue";
import { useAbs, useCeil, useFloor, useRound, useTrunc } from "@vueuse/math";

const input = ref(3.7);

// All operations are reactive
const abs = useAbs(input);
const ceil = useCeil(input);  
const floor = useFloor(input);
const round = useRound(input);
const trunc = useTrunc(input);

watchEffect(() => {
  console.log({
    input: input.value,    // 3.7
    abs: abs.value,        // 3.7
    ceil: ceil.value,      // 4
    floor: floor.value,    // 3
    round: round.value,    // 4
    trunc: trunc.value     // 3
  });
});

// Change input to see all values update reactively
input.value = -2.3;
// Will log: { input: -2.3, abs: 2.3, ceil: -2, floor: -3, round: -2, trunc: -2 }

Install with Tessl CLI