1---
2category: Reactivity
3related: syncRefs
4---
5 
6# syncRef
7 
8Two-way refs synchronization.
9 
10## Usage
11 
12```ts
13import { syncRef } from '@vueuse/core'
14 
15const a = ref('a')
16const b = ref('b')
17 
18const stop = syncRef(a, b)
19 
20console.log(a.value) // a
21 
22b.value = 'foo'
23 
24console.log(a.value) // foo
25 
26a.value = 'bar'
27 
28console.log(b.value) // bar
29```
30 
31### One directional
32 
33```ts
34import { syncRef } from '@vueuse/core'
35 
36const a = ref('a')
37const b = ref('b')
38 
39const stop = syncRef(a, b, { direction: 'rtl' })
40```
41 
42### Custom Transform
43 
44```ts
45import { syncRef } from '@vueuse/core'
46 
47const a = ref(10)
48const b = ref(2)
49 
50const stop = syncRef(a, b, {
51  transform: {
52    ltr: left => left * 2,
53    rtl: right => right / 2
54  }
55})
56 
57console.log(b.value) // 20
58 
59b.value = 30
60 
61console.log(a.value) // 15
62```
63 
64## Type Declarations
65 
66```ts
67type Direction = "ltr" | "rtl" | "both"
68type SpecificFieldPartial<T, K extends keyof T> = Partial<Pick<T, K>> &
69  Omit<T, K>
70/**
71 * A = B
72 */
73type Equal<A, B> = [A] extends [B] ? ([B] extends [A] ? true : false) : false
74/**
75 * A ∩ B ≠ ∅
76 */
77type IntersectButNotEqual<A, B> =
78  Equal<A, B> extends true ? false : A & B extends never ? false : true
79/**
80 * A ⊆ B
81 */
82type IncludeButNotEqual<A, B> =
83  Equal<A, B> extends true ? false : A extends B ? true : false
84/**
85 * A ∩ B = ∅
86 */
87type NotIntersect<A, B> =
88  Equal<A, B> extends true ? false : A & B extends never ? true : false
89interface EqualType<
90  D extends Direction,
91  L,
92  R,
93  O extends keyof Transform<L, R> = D extends "both" ? "ltr" | "rtl" : D,
94> {
95  transform?: SpecificFieldPartial<Pick<Transform<L, R>, O>, O>
96}
97type StrictIncludeMap<
98  IncludeType extends "LR" | "RL",
99  D extends Exclude<Direction, "both">,
100  L,
101  R,
102> = Equal<[IncludeType, D], ["LR", "ltr"]> &
103  Equal<[IncludeType, D], ["RL", "rtl"]> extends true
104  ? {
105      transform?: SpecificFieldPartial<Pick<Transform<L, R>, D>, D>
106    }
107  : {
108      transform: Pick<Transform<L, R>, D>
109    }
110type StrictIncludeType<
111  IncludeType extends "LR" | "RL",
112  D extends Direction,
113  L,
114  R,
115> = D extends "both"
116  ? {
117      transform: SpecificFieldPartial<
118        Transform<L, R>,
119        IncludeType extends "LR" ? "ltr" : "rtl"
120      >
121    }
122  : D extends Exclude<Direction, "both">
123    ? StrictIncludeMap<IncludeType, D, L, R>
124    : never
125type IntersectButNotEqualType<D extends Direction, L, R> = D extends "both"
126  ? {
127      transform: Transform<L, R>
128    }
129  : D extends Exclude<Direction, "both">
130    ? {
131        transform: Pick<Transform<L, R>, D>
132      }
133    : never
134type NotIntersectType<D extends Direction, L, R> = IntersectButNotEqualType<
135  D,
136  L,
137  R
138>
139interface Transform<L, R> {
140  ltr: (left: L) => R
141  rtl: (right: R) => L
142}
143type TransformType<D extends Direction, L, R> =
144  Equal<L, R> extends true
145    ? EqualType<D, L, R>
146    : IncludeButNotEqual<L, R> extends true
147      ? StrictIncludeType<"LR", D, L, R>
148      : IncludeButNotEqual<R, L> extends true
149        ? StrictIncludeType<"RL", D, L, R>
150        : IntersectButNotEqual<L, R> extends true
151          ? IntersectButNotEqualType<D, L, R>
152          : NotIntersect<L, R> extends true
153            ? NotIntersectType<D, L, R>
154            : never
155export type SyncRefOptions<
156  L,
157  R,
158  D extends Direction,
159> = ConfigurableFlushSync & {
160  /**
161   * Watch deeply
162   *
163   * @default false
164   */
165  deep?: boolean
166  /**
167   * Sync values immediately
168   *
169   * @default true
170   */
171  immediate?: boolean
172  /**
173   * Direction of syncing. Value will be redefined if you define syncConvertors
174   *
175   * @default 'both'
176   */
177  direction?: D
178} & TransformType<D, L, R>
179/**
180 * Two-way refs synchronization.
181 * From the set theory perspective to restrict the option's type
182 * Check in the following order:
183 * 1. L = R
184 * 2. L ∩ R ≠ ∅
185 * 3. L ⊆ R
186 * 4. L ∩ R = ∅
187 */
188export declare function syncRef<L, R, D extends Direction = "both">(
189  left: Ref<L>,
190  right: Ref<R>,
191  ...[options]: Equal<L, R> extends true
192    ? [options?: SyncRefOptions<L, R, D>]
193    : [options: SyncRefOptions<L, R, D>]
194): () => void
195```
196