using-triggers.md

^{fragment → Documentation → Guide → Using triggers}

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.

From a sketch

Instead of setting up the listener manually:

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

You can import and use them in your sketch:

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

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

See Triggers API docs for usage.

From the UI

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 }.

They are saved in localStorage so they persist between refreshs. This is useful when you want to quickly test or prototype values.

The dot on the left shows if a trigger is active or not. You can toggle activity by clicking on it.