useProjection

v0.0.15testeddemo

Reactive numeric projection from one numeric domain to another. A thin one-shot wrapper over {@link createProjection}: it projects a single reactive `input` and returns a `ComputedRef` of the result. The default (lerp-based) projector extrapolates past the domain bounds; pass `{ clamp: true }` to clamp the input to the `from` domain. SSR-safe — it performs only pure arithmetic and touches no browser globals.

Source Tests

Examples

const input = ref(50);
const projected = useProjection(input, [0, 100], [0, 1]); // 0.5

const input = ref(150);
const projected = useProjection(input, [0, 100], [0, 10], { clamp: true }); // 10

Demo

Loading demo…

Signature

export function useProjection(
  input: MaybeRefOrGetter<number>,
  fromDomain: MaybeRefOrGetter<readonly [number, number]>,
  toDomain: MaybeRefOrGetter<readonly [number, number]>,
  projector?: ProjectorFunction<number, number> | CreateProjectionOptions,
): ComputedRef<number>{ ... }

Parameters

Parameter	Type	Default	Description
`input`	`MaybeRefOrGetter<number>`	—	The reactive value to project
`fromDomain`	`MaybeRefOrGetter<readonly [number, number]>`	—	The source domain `[start, end]`
`toDomain`	`MaybeRefOrGetter<readonly [number, number]>`	—	The target domain `[start, end]`
`projector`?	`ProjectorFunction<number, number> \| CreateProjectionOptions \| undefined`	—	A custom projector, or options for the default projector

Returns

ComputedRef<number>A computed ref of the projected value