Skip to content
On this page

useProjection

Category
Export Size
278 B
Package
@vueuse/math
Last Changed
7 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
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: MaybeComputedRef<number>,
  fromDomain: MaybeComputedRef<readonly [number, number]>,
  toDomain: MaybeComputedRef<readonly [number, number]>,
  projector?: ProjectorFunction<number, number>
): ComputedRef<number>
/**
 * Reactive numeric projection from one domain to another.
 *
 * @see https://vueuse.org/useProjection
 */
export declare function useProjection(
  input: MaybeComputedRef<number>,
  fromDomain: MaybeComputedRef<readonly [number, number]>,
  toDomain: MaybeComputedRef<readonly [number, number]>,
  projector?: ProjectorFunction<number, number>
): ComputedRef<number>

Source

SourceDemoDocs

Contributors

Anthony Fu
Curt Grimes
Wenlu Wang

Changelog

v8.9.2 on 7/12/2022
0de42 - feat!: rework useProjection (#1822)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.9.0 on 7/6/2022
09be6 - feat(math): new math package and useProjection function (#1224)

Released under the MIT License.