0
# Basic Math Operations
1

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

4
## Capabilities
5

6
### useAbs
7

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

10
```typescript { .api }
11
/**
12
 * Reactive Math.abs - returns absolute value of a number
13
 * @param value - The number to get absolute value of
14
 * @returns ComputedRef containing the absolute value
15
 */
16
function useAbs(value: MaybeRefOrGetter<number>): ComputedRef<number>;
17
```
18

19
**Usage Examples:**
20

21
```typescript
22
import { ref } from "vue";
23
import { useAbs } from "@vueuse/math";
24

25
const value = ref(-42);
26
const absolute = useAbs(value);
27

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

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

33
// Works with getters
34
const computed = useAbs(() => Math.sin(Date.now()));
35
```
36

37
### useCeil
38

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

41
```typescript { .api }
42
/**
43
 * Reactive Math.ceil - rounds number up to nearest integer
44
 * @param value - The number to round up
45
 * @returns ComputedRef containing the ceiling value
46
 */
47
function useCeil(value: MaybeRefOrGetter<number>): ComputedRef<number>;
48
```
49

50
**Usage Examples:**
51

52
```typescript
53
import { ref } from "vue";
54
import { useCeil } from "@vueuse/math";
55

56
const value = ref(4.3);
57
const ceiling = useCeil(value);
58

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

61
value.value = -2.7;
62
console.log(ceiling.value); // -2
63
```
64

65
### useFloor
66

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

69
```typescript { .api }
70
/**
71
 * Reactive Math.floor - rounds number down to nearest integer
72
 * @param value - The number to round down
73
 * @returns ComputedRef containing the floor value
74
 */
75
function useFloor(value: MaybeRefOrGetter<number>): ComputedRef<number>;
76
```
77

78
**Usage Examples:**
79

80
```typescript
81
import { ref } from "vue";
82
import { useFloor } from "@vueuse/math";
83

84
const value = ref(4.9);
85
const floor = useFloor(value);
86

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

89
value.value = -2.1;
90
console.log(floor.value); // -3
91
```
92

93
### useRound
94

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

97
```typescript { .api }
98
/**
99
 * Reactive Math.round - rounds number to nearest integer
100
 * @param value - The number to round
101
 * @returns ComputedRef containing the rounded value
102
 */
103
function useRound(value: MaybeRefOrGetter<number>): ComputedRef<number>;
104
```
105

106
**Usage Examples:**
107

108
```typescript
109
import { ref } from "vue";
110
import { useRound } from "@vueuse/math";
111

112
const value = ref(4.6);
113
const rounded = useRound(value);
114

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

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

120
value.value = -2.6;
121
console.log(rounded.value); // -3
122
```
123

124
### useTrunc
125

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

128
```typescript { .api }
129
/**
130
 * Reactive Math.trunc - truncates decimal part of number
131
 * @param value - The number to truncate
132
 * @returns ComputedRef containing the truncated value
133
 */
134
function useTrunc(value: MaybeRefOrGetter<number>): ComputedRef<number>;
135
```
136

137
**Usage Examples:**
138

139
```typescript
140
import { ref } from "vue";
141
import { useTrunc } from "@vueuse/math";
142

143
const value = ref(4.9);
144
const truncated = useTrunc(value);
145

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

148
value.value = -4.9;
149
console.log(truncated.value); // -4 (different from floor for negative numbers)
150
```
151

152
## Common Patterns
153

154
All basic math functions follow the same reactive pattern:
155

156
```typescript
157
import { ref, watchEffect } from "vue";
158
import { useAbs, useCeil, useFloor, useRound, useTrunc } from "@vueuse/math";
159

160
const input = ref(3.7);
161

162
// All operations are reactive
163
const abs = useAbs(input);
164
const ceil = useCeil(input);  
165
const floor = useFloor(input);
166
const round = useRound(input);
167
const trunc = useTrunc(input);
168

169
watchEffect(() => {
170
  console.log({
171
    input: input.value,    // 3.7
172
    abs: abs.value,        // 3.7
173
    ceil: ceil.value,      // 4
174
    floor: floor.value,    // 3
175
    round: round.value,    // 4
176
    trunc: trunc.value     // 3
177
  });
178
});
179

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