fn

syncRef

v0.0.14testeddemo

Keeps two refs in sync (two-way by default, or one-way via direction), with optional value transforms.

Examples

ts
const left = ref('hello');
const right = ref('hello');
syncRef(left, right);

left.value = 'world'; // right.value === 'world'
right.value = 'foo';  // left.value === 'foo'
ts
// One-way with a transform (left number -> right string)
const count = ref(0);
const text = ref('0');
syncRef(count, text, {
  direction: 'ltr',
  transform: { ltr: value => String(value) },
});

Demo

Loading demo…

Signature

ts
export function syncRef<L, R = L>(
  left: Ref<L>,
  right: Ref<R>,
  options: SyncRefOptions<L, R> ={ ... }

Type Parameters

L
R= L

Parameters

ParameterTypeDescription
leftRef<L>The left ref to synchronize
rightRef<R>The right ref to synchronize
options?SyncRefOptions<L, R>direction, transform, immediate, flush, and deep

Returns

SyncRefReturn{ stop } to tear down the synchronization
PropertyTypeDescription
stopWatchStopHandleStop all underlying watchers. Synchronization cannot be resumed afterwards.