Skip to main content
onChange<V>(value: V, action: ([V, V]) => void): Component;

​
Parameters

​
value
V
The value to monitor for changes.
​
action
([V, V]) => void
Function called when the value changes. Receives an array with the previous value and new value.

​
Support

​
Usage

​
Monitor text field changes

const [text, setText] = useState("")

TextField({
    placeholder: "Enter text",
    text: text,
    setText: setText
})
.onChange(text, ([oldValue, newValue]) => {
    console.log(`Text changed from "${oldValue}" to "${newValue}"`)
})

​
Track toggle state changes

const [isEnabled, setIsEnabled] = useState(false)

Toggle("Enable notifications", isEnabled, setIsEnabled)
    .onChange(isEnabled, ([wasEnabled, nowEnabled]) => {
        if (nowEnabled) {
            console.log("Notifications enabled")
        } else {
            console.log("Notifications disabled")
        }
    })

​
Monitor picker selection

const [selectedOption, setSelectedOption] = useState("Option 1")

Picker("Choose option", selectedOption, setSelectedOption, [
    "Option 1",
    "Option 2", 
    "Option 3"
])
.onChange(selectedOption, ([previous, current]) => {
    console.log(`Selection changed from ${previous} to ${current}`)
    // Perform additional actions based on the change
})

​
Multiple change handlers

const [count, setCount] = useState(0)

VStack([
    Text(`Count: ${count}`),
    Button("Increment", () => setCount(count + 1))
])
.onChange(count, ([oldCount, newCount]) => {
    console.log(`Count changed: ${oldCount} → ${newCount}`)
})
.onChange(count, ([oldCount, newCount]) => {
    if (newCount > 10) {
        console.log("Count exceeded 10!")
    }
})