1---
2category: Reactivity
3alias: createReactiveFn
4---
5 
6# reactify
7 
8Converts plain functions into reactive functions. The converted function accepts refs as its arguments and returns a ComputedRef, with proper typing.
9 
10::: tip
11Interested to see some application or looking for some pre-reactified functions?
12 
13Check out [⚗️ Vue Chemistry](https://github.com/antfu/vue-chemistry)!
14:::
15 
16## Usage
17 
18Basic example
19 
20```ts
21import { reactify } from '@vueuse/core'
22import { shallowRef } from 'vue'
23 
24// a plain function
25function add(a: number, b: number): number {
26  return a + b
27}
28 
29// now it accept refs and returns a computed ref
30// (a: number | Ref<number>, b: number | Ref<number>) => ComputedRef<number>
31const reactiveAdd = reactify(add)
32 
33const a = shallowRef(1)
34const b = shallowRef(2)
35const sum = reactiveAdd(a, b)
36 
37console.log(sum.value) // 3
38 
39a.value = 5
40 
41console.log(sum.value) // 7
42```
43 
44An example of implementing a reactive [Pythagorean theorem](https://en.wikipedia.org/wiki/Pythagorean_theorem).
45 
46<!-- eslint-skip -->
47 
48```ts
49import { reactify } from '@vueuse/core'
50import { shallowRef } from 'vue'
51 
52const pow = reactify(Math.pow)
53const sqrt = reactify(Math.sqrt)
54const add = reactify((a: number, b: number) => a + b)
55 
56const a = shallowRef(3)
57const b = shallowRef(4)
58const c = sqrt(add(pow(a, 2), pow(b, 2)))
59console.log(c.value) // 5
60 
61// 5:12:13
62a.value = 5
63b.value = 12
64console.log(c.value) // 13
65```
66 
67You can also do it this way:
68 
69```ts
70import { reactify } from '@vueuse/core'
71import { shallowRef } from 'vue'
72 
73function pythagorean(a: number, b: number) {
74  return Math.sqrt(a ** 2 + b ** 2)
75}
76 
77const a = shallowRef(3)
78const b = shallowRef(4)
79 
80const c = reactify(pythagorean)(a, b)
81console.log(c.value) // 5
82```
83 
84Another example of making reactive `stringify`
85 
86```ts
87import { reactify } from '@vueuse/core'
88import { shallowRef } from 'vue'
89 
90const stringify = reactify(JSON.stringify)
91 
92const obj = shallowRef(42)
93const dumped = stringify(obj)
94 
95console.log(dumped.value) // '42'
96 
97obj.value = { foo: 'bar' }
98 
99console.log(dumped.value) // '{"foo":"bar"}'
100```
101 
102## Type Declarations
103 
104```ts
105export type Reactified<T, Computed extends boolean> = T extends (
106  ...args: infer A
107) => infer R
108  ? (
109      ...args: {
110        [K in keyof A]: Computed extends true
111          ? MaybeRefOrGetter<A[K]>
112          : MaybeRef<A[K]>
113      }
114    ) => ComputedRef<R>
115  : never
116export type ReactifyReturn<
117  T extends AnyFn = AnyFn,
118  K extends boolean = true,
119> = Reactified<T, K>
120export interface ReactifyOptions<T extends boolean> {
121  /**
122   * Accept passing a function as a reactive getter
123   *
124   * @default true
125   */
126  computedGetter?: T
127}
128/**
129 * Converts plain function into a reactive function.
130 * The converted function accepts refs as it's arguments
131 * and returns a ComputedRef, with proper typing.
132 *
133 * @param fn - Source function
134 * @param options - Options
135 *
136 * @__NO_SIDE_EFFECTS__
137 */
138export declare function reactify<T extends AnyFn, K extends boolean = true>(
139  fn: T,
140  options?: ReactifyOptions<K>,
141): ReactifyReturn<T, K>
142/** @deprecated use `reactify` instead */
143export declare const createReactiveFn: typeof reactify
144```
145