sync-ref

Keep two refs in sync, optionally converting between their types.

Usage

import { syncRef } from "@vizejs/composable/sync-ref";

Runtime contract

API

syncRef

Keep two refs in sync, optionally converting between their types. The option type is computed from both ref types: converters may be omitted only when the types are identical, and exactly the converters the direction needs are required otherwise. A re-entrancy guard prevents ping-pong when converters are not exact inverses. Watchers follow the owning reactive scope; SSR-safe.

function syncRef<Left, Right = Left, const Direction extends SyncRefDirection = "both">( left: Ref<Left>, right: Ref<Right>, ...options: SameType<Left, Right> extends true ? [options?: SyncRefOptions<Left, Right, Direction>] : [options: SyncRefOptions<Left, Right, Direction>] ): () => void

const celsius = ref(20);
const label = ref("");
syncRef(celsius, label, {
  transform: { ltr: (c) => `${c}°C`, rtl: (text) => Number.parseFloat(text) },
});

syncRef

function syncRef( left: Ref<unknown>, right: Ref<unknown>, options: SyncRefBaseOptions<SyncRefDirection> & { readonly transform?: { readonly ltr?: (left: unknown) => unknown; readonly rtl?: (right: unknown) => unknown; }; } = {}, ): () => void

Types

SyncRefBaseOptions

Direction and timing options shared by every syncRef call.