useClamp

Category

@Math

Export Size

667 B

Package

@reause/math

Last Changed

5 days ago

Reactively clamp a value between two other values.

Demo

Usage

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

const [min, setMin] = useState(0)
const [max, setMax] = useState(10)
const [value, setValue] = useClamp(0, min, max)

setValue(15) // value is 10
setValue(-5) // value is 0

Writable Ref

value seeds the hook's internal state; the returned setter clamps on write:

import { useClamp } from '@reause/math'

const [clamped, setClamped] = useClamp(0, 0, 10)

setClamped(15) // clamped is 10
setClamped(-5) // clamped is 0

Reactive Bounds

value, min and max are plain read-only numbers (upstream takes MaybeRefOrGetter<number>). Bounds are re-resolved on every render, so shrinking max re-clamps the current value:

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

const [max, setMax] = useState(10)
const [clamped] = useClamp(5, 0, max)

setMax(3) // clamped is 3 on the next render

Type Declarations

export function useClamp(value: number, min: number, max: number): [
    number,
    (value: number) => void
]

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

113ff - fix(math): resolve useClamp audit findings (#783)

424cf - feat(math): add useClamp (#91)