Using triggers

Triggers are functions you can call imperatively from your sketch file to make it interactive. They can also be assigned on a prop through the UI.

Instead of manually setting up event listeners:

export let init = ({ canvas }) => {
    canvas.addEventListener('click', (event) => {
		console.log("canvas clicked");
	});
}

Triggers can be imported and used directly within a sketch:

import { onClick } from "@fragment/triggers";

export let init = ({ canvas }) => {
	onClick((event) => {
		console.log("canvas clicked");
	});
}

See the Triggers API documentation for details.

Triggers can also added on specific type of fields from the UI, by clicking on the label of a field. Triggers can only be added when the type of a prop is a function or a number with params: { min, max }.

Assigned triggers are stored in Local Storage, ensuring persistence across refreshes. This is particularly useful for rapid testing or prototyping.

A dot to the left of each trigger indicates whether it is currently active. Clicking the dot toggles its active state.