@fcannizzaro/streamdeck-react

SDK Hooks

Hooks for Stream Deck SDK features -- URLs, profiles, Property Inspector communication, alerts, and titles.

useOpenUrl

Opens a URL in the user's default browser.

function useOpenUrl(): (url: string) => Promise<void>;
function LinkKey() {
  const openUrl = useOpenUrl();

  useKeyDown(() => {
    openUrl('https://github.com/myproject');
  });

  // ...
}

useSwitchProfile

Switches to a different Stream Deck profile.

function useSwitchProfile(): (profile: string, deviceId?: string) => Promise<void>;
function ProfileKey() {
  const switchProfile = useSwitchProfile();

  useKeyDown(async () => {
    await switchProfile('Gaming');
  });

  // ...
}

If deviceId is omitted, the current device is used.

useSendToPI

Sends a message to the Property Inspector.

function useSendToPI(): (payload: JsonValue) => Promise<void>;
function MyKey() {
  const sendToPI = useSendToPI();

  useKeyDown(() => {
    sendToPI({ currentState: 'active' });
  });

  // ...
}

usePropertyInspector

Receives messages sent from the Property Inspector via sendToPlugin.

function usePropertyInspector<T extends JsonValue = JsonValue>(
  callback: (payload: T) => void,
): void;
function MyKey() {
  usePropertyInspector<{ action: string }>((msg) => {
    if (msg.action === 'refresh') {
      // Handle PI message
    }
  });

  // ...
}

useShowAlert

Triggers the Stream Deck's built-in alert overlay animation on the key.

function useShowAlert(): () => Promise<void>;

useShowOk

Triggers the Stream Deck's built-in "OK" checkmark overlay animation. Only available on key actions.

function useShowOk(): () => Promise<void>;
function SaveKey() {
  const showOk = useShowOk();

  useKeyDown(async () => {
    await saveData();
    await showOk();
  });

  // ...
}

useTitle

Sets the native Stream Deck title overlay (separate from the rendered image).

function useTitle(): (title: string) => Promise<void>;

Most users embed text directly in their JSX renders, but useTitle is available for the built-in title overlay that the Stream Deck displays on top of the key image. Only available on key actions.

On this page