onControlsEvent

Registers a callback that runs when the user interacts with a rich control.
In this callback, an extension should:
Handle the user's input (for example, apply an effect to the user's image).
Track the state of controls (for example, the value of a Slider control).
Re-render the rich controls when the state changes.
Usage
1
const canva = window.canva.init();
2
​
3
const state = {
4
  clicks: 0,
5
};
6
​
7
canva.onReady(() => {
8
  renderControls();
9
});
10
​
11
canva.onControlsEvent(async (opts) => {
12
  if (opts.message.controlId === "exampleButton") {
13
    state.clicks = state.clicks + 1;
14
  }
15
​
16
  renderControls();
17
});
18
​
19
function renderControls() {
20
  const controls = [
21
    canva.create("button", {
22
      id: "exampleButton",
23
      label: `${state.clicks} clicks`,
24
    }),
25
  ];
26
​
27
  canva.updateControlPanel(controls);
28
}
Copied!
Parameters
Name
Type
Required
Description
handler
​ControlsEventHandler​
Yes
The callback that runs when the user interacts with a control.
Returns
void
Types
ControlsEventHandler
The callback that runs when the user interacts with a control.
Signature
1
(opts) => void
Copied!
Parameters
Name
Type
Required
Description
opts
object
Yes
Information about the event.
opts.message
object
Yes
Information about the event.
opts.message.commit
boolean
Yes
If false, the user is interacting with the control. If true, the user has finished interacting with the control.
opts.message.controlId
string
Yes
The ID of the control that triggered the event.
opts.message.controlType
string
Yes
The type of control that triggered the event.
opts.message.message
object
Yes
Additional information about the event. The available properties depend on the control.
Returns
void

onReady

onLayoutChange

Last modified 3mo ago

Copy link

Contents