fn
useProjection
v0.0.14testeddemoReactive numeric projection from one numeric domain to another.
A thin one-shot wrapper over 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.
Examples
ts
const input = ref(50);
const projected = useProjection(input, [0, 100], [0, 1]); // 0.5ts
const input = ref(150);
const projected = useProjection(input, [0, 100], [0, 10], { clamp: true }); // 10Demo
Loading demo…
Signature
ts
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 | 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 | A custom projector, or options for the default projector |
Returns
ComputedRef<number>A computed ref of the projected value