useMath

Category

@Math

Export Size

73 B

Package

@reause/math

Last Changed

5 days ago

Reactive Math methods.

Demo

Usage

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

const [base, setBase] = useState(2)
const [exponent, setExponent] = useState(3)
const result = useMath('pow', base, exponent) // 8

const [num, setNum] = useState(2)
const root = useMath('sqrt', num) // 1.4142135623730951

setNum(4) // triggers a re-render
// root === 2

Arguments are plain read-only numbers (upstream takes MaybeRefOrGetter):

import { useMath } from '@reause/math'

const power = useMath('pow', 2, 3) // 8
const root = useMath('sqrt', 4) // 2
const rounded = useMath('round', 2.5) // 3

Type Declarations

export type UseMathKeys = keyof {
    [K in keyof Math as Math[K] extends (...args: any) => any ? K : never]: unknown;
}

export type UseMathReturn<K extends keyof Math> = ReturnType<PlainMathMethod<Math[K]>>

type PlainMathMethod<T> = T extends (...args: infer A) => infer R ? (...args: A) => R : never

type ArgumentsType<T> = T extends (...args: infer U) => any ? U : never

export function useMath<K extends keyof Math>(key: K, ...args: ArgumentsType<PlainMathMethod<Math[K]>>): UseMathReturn<K>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

d97ab - fix(math): resolve useMath audit findings (#787)

4e32f - feat(math): add useMath (#158)