Skip to content

useProjection

Category
Export Size
163 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

ts
/**
 * Reactive numeric projection from one domain to another.
 *
 * @see https://vueuse.org/useProjection
 *
 * @__NO_SIDE_EFFECTS__
 */
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
SerKo
Robin
Curt Grimes
Wenlu Wang

Changelog

v13.6.0 on
d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)

Released under the MIT License.

Build smarter with AI
Join a free workshop to explore LLMs and advanced AI tools.
Register now
October 22