events

Functions for subscribing to platform events (appsInToss, TDS, Granite). Every addEventListener call returns a cleanup function — always invoke it on component unmount. For analytics logging, see the Analytics namespace.

Methods

Method	Return type	Purpose
appsInTossEvent.addEventListener	() => void	Subscribe to Apps in Toss platform events.
graniteEvent.addEventListener	() => void	Subscribe to Granite (Toss internal) events — backEvent, homeEvent.
onVisibilityChangedByTransparentServiceWeb	() => void	Subscribe to visibility changes of the transparent service web container.
tdsEvent.addEventListener	() => void	Subscribe to TDS (Toss Design System) events — navigationAccessoryEvent.

Permission

No permission required. None of the events namespace functions are bound to a PermissionName.

Event subscription pattern

All addEventListener and onVisibilityChangedByTransparentServiceWeb calls return a cleanup function. In React, use it as the useEffect return value.

import { graniteEvent } from '@apps-in-toss/web-framework';
import { useEffect } from 'react';

function Page() {
  useEffect(() => {
    const cleanup = graniteEvent.addEventListener('backEvent', {
      onEvent: () => {
        // handle hardware back button
      },
    });
    return cleanup;
  }, []);

  return <main>{/* page content */}</main>;
}

UX guidance

• Never miss the cleanup. If the component unmounts with an active subscription, events will still fire and trigger state updates on an unmounted component — this causes memory leaks. Always return the cleanup from useEffect.
• graniteEvent.backEvent intercepts hardware back. While subscribed, the default back behavior is suppressed. You must implement your own navigation logic inside onEvent.
• tdsEvent.navigationAccessoryEvent pairs with partner.addAccessoryButton. You need both: register the button, then subscribe to click events.

Try it live

Subscribe to events directly on the Events page in sdk-example.

→Open in sdk-example

External references

• @apps-in-toss/web-framework — SDK package. The actual exports are re-exported from @apps-in-toss/web-bridge.