Canva Developers logo
Design Interaction
Getting started
Design Interaction

onAppElementChange

API reference for the onAppElementChange method.

Registers a callback that runs when:

  • The app calls the setAppElementData method
  • The user selects an app element
  • The user deselects an app element

A use-case for this method is to keep track of whether or not an app element is selected. To learn more, see Checking selection state.

Usage

import { getDesignInteraction } from "@canva/design-interaction";


const designInteraction = getDesignInteraction();


designInteraction.onAppElementChange((element) => {
  if (element) {
    console.log("You selected an app element");
    console.log(element.data);
    console.log(element.version);
  } else {
    console.log("You deselected an app element");
  }
});

Parameters

#callbackfunction
Required

The callback function that runs when:

  • An app calls the setAppElementData method
  • The user selects an app element
  • The user deselects an app element
#callback(element)object
Optional

The metadata for handling an app element change.

If undefined, the user has deselected an app element.

#callback(element.data)object
Required

The data attached to the app element.

#callback(element.version)number
Required

The version number of the app. If you make changes to the structure of the app element data, you can use this version number to gracefully handle the different structures for different versions of the app.

Returns

void