useControllableState
Powers every component in this registry that supports both a value / onValueChange (controlled) and a defaultValue (uncontrolled) mode — including Price Input, Elastic Slider, and Elastic Range Slider.
Last updated January 1, 1980
Overview
The first counter manages its own state internally (uncontrolled). The second is driven entirely by the parent (controlled) — the same Counter implementation handles both.
Installation
Usage
import { useControllableState } from "@/hooks/use-controllable-state"
function Counter({ value, defaultValue = 0, onValueChange }) {
const [count, setCount] = useControllableState({
prop: value,
defaultProp: defaultValue,
onChange: onValueChange,
caller: "Counter",
})
return <button onClick={() => setCount((c) => c + 1)}>{count}</button>
}