syncRef

v0.0.15testeddemo

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

Examples

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

left.value = 'world'; // right.value === 'world'
right.value = 'foo';  // left.value === 'foo'

// 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

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

Type Parameters

L

R= L

Parameters

Parameter	Type	Default	Description
`left`	`Ref<L, L>`	—	The left ref to synchronize
`right`	`Ref<R, R>`	—	The right ref to synchronize
`options`?	`SyncRefOptions<L, R>`	`{}`	`direction`, `transform`, `immediate`, `flush`, and `deep`

Returns

SyncRefReturn`{ stop }` to tear down the synchronization