Adding Interactivity

Sup patches can include interactive elements that respond to user actions. This guide covers different ways to make your patches interactive.

Buttons

The simplest way to add interactivity is with buttons. When clicked, buttons can trigger functions in your patch. Your main() function will be re-run on each interaction, so you can update state or display new content.

function main() {
  return sup.button(
    "Click me!", // Button label
    handleClick, // Click handler function
    "button-data" // Value passed to handler
  );
}

function handleClick(e) {
  console.log(`${e.user.username} clicked: ${e.value}`);
}

The click handler function must be defined at the top level of your patch. It will receive the value you specified when creating the button.

Multiple Buttons

You can return multiple buttons to create simple interfaces:

function main() {
  return [
    sup.button("Red", selectColor, "red"),
    sup.button("Blue", selectColor, "blue"),
    sup.button("Green", selectColor, "green"),
  ];
}

function selectColor(e) {
  return `${e.user.username} selected ${e.value}!`;
}

Learn more about buttons

onThreadReply

You can add an onThreadReply function to your patch to handle replies to your patch. This function will be called when a user posts a message in the patch’s thread.

function onThreadReply(e) {
  console.log(`${e.user.username} replied: ${e.input.text}`);
  return `sup ${e.user.username}!`;
}

Learn more about onThreadReply

onReact

You can add an onReact function to your patch to handle emoji reactions to your patch.

function onReact(e) {
  console.log(`${e.user.username} reacted: ${e.reactionEmoji.shortname}`);
}

Learn more about onReact