onchange
Description
Fires on a color change when a new value is selected via the input field or sliderUsage
onchange?: (ev: { value: string; input?: boolean }) => void;
Parameters
The callback of the event takes an object with the following parameter:
- value - (required) HEX code of the newly selected color
- input - (optional) true, if the value is being typed (see the Details section below)
Example
<script>
function handleChange({ value }) {
console.log(value);
// => "#75FFD6"
}
</script>
<ColorBoard onchange={handleChange}/>
Details
The handler function receives the HEX code of the newly selected color. And it also receives an object with the text typed in the input. The received object may also contain input:true, depending on the fired HTML input event:
- if the input event of the HTML input is caught (the value is being typed), the
changeevent of the control will haveinput:true - if the change event of the HTML input is caught (a user has applied changes), the
changeevent of the control won't have theinputproperty
Related article: Catching the change of the selected color