useProjection

Category

@Math

Export Size

142 B

Package

@reause/math

Last Changed

5 days ago

Related

createGenericProjectioncreateProjection

Reactive numeric projection from one domain to another

Demo

Usage

import { useProjection } from '@reause/math'
import { useState } from 'react'

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

setInput(5) // projected === 50 on the next render
setInput(10) // projected === 100 on the next render

input, fromDomain and toDomain are plain read-only values (upstream takes MaybeRefOrGetter<...>). Re-render with new values — e.g. from useState — and the hook recomputes:

import { useProjection } from '@reause/math'
import { useState } from 'react'

const [from, setFrom] = useState<readonly [number, number]>([0, 10])
const projected = useProjection(5, from, [0, 100])

setFrom([0, 20]) // triggers a re-render

Type Declarations

export type ProjectorFunction<F, T> = (input: F, from: readonly [
    F,
    F
], to: readonly [
    T,
    T
]) => T

export function useProjection(input: number, fromDomain: readonly [
    number,
    number
], toDomain: readonly [
    number,
    number
], projector?: ProjectorFunction<number, number>): number

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

856d6 - fix(math): resolve useProjection audit findings (#791)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)