Skip to content

useProjection

Category
Export Size
214 B
Package
@vueuse/math
Last Changed
3 months ago
Related

Reactive numeric projection from one domain to another.

Demo

Projection from [0, 10] to [10, 100]
Input: 0
Output: 10

Usage

ts
import { useProjection } from '@vueuse/math'

const input = ref(0)
const projected = useProjection(input, [0, 10], [0, 100])

input.value = 5 // projected.value === 50
input.value = 10 // projected.value === 100

Type Declarations

typescript
/**
 * Reactive numeric projection from one domain to another.
 *
 * @see https://vueuse.org/useProjection
 */
export declare function useProjection(
  input: MaybeRefOrGetter<number>,
  fromDomain: MaybeRefOrGetter<readonly [number, number]>,
  toDomain: MaybeRefOrGetter<readonly [number, number]>,
  projector?: ProjectorFunction<number, number>,
): ComputedRef<number>

Source

SourceDemoDocs

Contributors

Anthony Fu
IlyaL
Anthony Fu
Robin
Curt Grimes
Wenlu Wang

Changelog

v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v10.0.0-beta.4 on
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter

Released under the MIT License.

2 days of talks + 1 day of live coding.
50+ speakers. All major frameworks!
Join for Free ➜