Events

Perry widgets support native event handlers for user interaction.

onClick

import { Button, Text } from "perry/ui";

Button("Click me", () => {
  console.log("Button clicked!");
});

// Or set it after creation
const label = Text("Clickable text");
label.setOnClick(() => {
  console.log("Text clicked!");
});

onHover

Triggered when the mouse enters or leaves a widget.

import { Button } from "perry/ui";

const btn = Button("Hover me", () => {});
btn.setOnHover((isHovering) => {
  if (isHovering) {
    console.log("Mouse entered");
  } else {
    console.log("Mouse left");
  }
});

Note: Hover events are available on macOS, Windows, Linux, and Web. iOS and Android use touch interactions instead.

onDoubleClick

import { Text } from "perry/ui";

const label = Text("Double-click me");
label.setOnDoubleClick(() => {
  console.log("Double-clicked!");
});

Keyboard Shortcuts

Register global keyboard shortcuts:

import { registerShortcut } from "perry/ui";

// Cmd+N on macOS, Ctrl+N on other platforms
registerShortcut("n", () => {
  console.log("New document");
});

// Cmd+Shift+S
registerShortcut("S", () => {
  console.log("Save as...");
});

Keyboard shortcuts are also supported in menu items:

menuAddItem(menu, "New", () => newDoc(), "n");    // Cmd+N
menuAddItem(menu, "Save As", () => saveAs(), "S"); // Cmd+Shift+S

Clipboard

import { clipboardGet, clipboardSet } from "perry/ui";

// Copy to clipboard
clipboardSet("Hello, clipboard!");

// Read from clipboard
const text = clipboardGet();

Complete Example

import { App, Text, Button, VStack, HStack, State, Spacer, registerShortcut } from "perry/ui";

const lastEvent = State("No events yet");

// Global shortcut
registerShortcut("r", () => {
  lastEvent.set("Keyboard: Cmd+R");
});

App("Events Demo", () =>
  VStack([
    Text(`Last event: ${lastEvent.get()}`),

    Spacer(),

    Button("Click me", () => {
      lastEvent.set("Button clicked");
    }),

    (() => {
      const hoverBtn = Button("Hover me", () => {});
      hoverBtn.setOnHover((h) => {
        lastEvent.set(h ? "Mouse entered" : "Mouse left");
      });
      return hoverBtn;
    })(),

    (() => {
      const dblLabel = Text("Double-click me");
      dblLabel.setOnDoubleClick(() => {
        lastEvent.set("Double-clicked!");
      });
      return dblLabel;
    })(),
  ])
);

Next Steps

• Menus — Menu bar and context menus with keyboard shortcuts
• Widgets — All available widgets
• State Management — Reactive state