onChange
Description
Fires on change of the value in textareaUsage
onChange?: (ev: { value: string; input?: boolean }) => void;
Parameters
- value - (required) the value of the input
- input - (optional) - (optional) true, if a value is being typed by a user (check details below)
Example
Tracking user input:
import { useCallback } from "react";
import { Textarea } from "@svar-ui/react-textarea";
const Example = () => {
const onChange = useCallback(({ value, input }: { value: string; input?: boolean }) => {
console.log("Textarea value:", value, "Changed by user:", !!input);
}, []);
return <Textarea onChange={onChange} />;
};
Details
The handler function receives the new value of the control typed in the input. The received object may also contain input:true
, depending on the fired HTML input events:
- if the HTML input element's input event is caught (a number is being typed), the control's onChange will have
input:true
- if the HTML input element's change event is caught (a user has applied changes), the control's onChange won't have the
input
property
Related article: Catching the change of the value