Skip to main content

onChange

Description​

Fires on a color change when a new value is selected via the input field or slider

Usage​

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​

function handleChange({ value }: { value: string }) {
  console.log(value); 
  // => "#75FFD6"
}

<ColorBoard onChange={handleChange} />

Details​

The handler function receives the HEX code of the newly selected color. 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 onChange handler of the control will receive input:true
  • if the change event of the HTML input is caught (a user has applied changes), the onChange handler of the control won't have the input property

Related article: Catching the change of the selected color