# Using the Superwall Delegate

Use Superwall's delegate to extend our SDK's functionality across several surface areas by assigning to the `delegate` property:

:::expo
```tsx
import { useSuperwallEvents } from "expo-superwall";

// Use the useSuperwallEvents hook to subscribe to Superwall events
function MyApp() {
  useSuperwallEvents({
    onSuperwallEvent: (eventInfo) => {
      console.log('Superwall Event:', eventInfo.event.event, eventInfo.params);
    },
    onSubscriptionStatusChange: (status) => {
      console.log('Subscription Status Changed:', status.status);
    },
    onPaywallPresent: (info) => {
      console.log('Paywall Presented:', info.name);
    },
    onPaywallDismiss: (info, result) => {
      console.log('Paywall Dismissed:', info.name, 'Result:', result);
    },
    onCustomPaywallAction: (name) => {
      console.log('Custom Action:', name);
      // Handle custom actions here
    },
  });

  return (
    // Your app content
  );
}
```

> **Note**

The new hooks-based SDK uses `useSuperwallEvents()` instead of the delegate pattern. For delegate functionality with the compat SDK, use `expo-superwall/compat`.


:::

Some common use cases for using the Superwall delegate include:

* **Custom actions:** [Respond to custom tap actions from a paywall.](/docs/sdk/guides/advanced/custom-paywall-actions#custom-paywall-actions)
* **Respond to purchases:** [See which product was purchased from the presented paywall.](/docs/sdk/guides/advanced/viewing-purchased-products)
* **Analytics:** [Forward events from Superwall to your own analytics.](/docs/sdk/guides/3rd-party-analytics)

Below are some commonly used implementations when using the delegate.

Superwall Events [#superwall-events]

Most of what occurs in Superwall can be viewed using the delegate method to respond to events:

:::expo
```typescript
export class MySuperwallDelegate extends SuperwallDelegate {
  handleSuperwallPlacement(placementInfo: SuperwallPlacementInfo) {
    console.log("Handling Superwall placement:", placementInfo)

    switch (placementInfo.placement.type) {
      case PlacementType.transactionComplete:
        const product = placementInfo.params?.["product"]
        if (product) {
          console.log(`Product: ${product}`)
        } else {
          console.log("Product not found in params.")
        }
        break
      default:
        // Handle any other placement types as needed...
        break
    }
  }
}
```
:::

Paywall Custom Actions [#paywall-custom-actions]

Using the [custom tap action](/docs/sdk/guides/advanced/custom-paywall-actions#custom-paywall-actions), you can respond to any arbitrary event from a paywall:

:::expo
```tsx
import { useSuperwallEvents } from "expo-superwall";

function MyApp() {
  useSuperwallEvents({
    onCustomPaywallAction: (name) => {
      console.log("Handling custom paywall action:", name);
      // Handle your custom actions here
    },
  });

  return (
    // Your app content
  );
}
```
:::

Subscription status changes [#subscription-status-changes]

You can be informed of subscription status changes using the delegate. If you need to set or handle the status on your own, use a [purchase controller](/docs/sdk/guides/advanced-configuration) — this function is only for informational, tracking or similar purposes:

:::expo
```tsx
import { useSuperwallEvents } from "expo-superwall";

function MyApp() {
  useSuperwallEvents({
    onSubscriptionStatusChange: (status) => {
      console.log("Subscription status changed to:", status.status);
      if (status.status === "ACTIVE") {
        console.log("Active entitlements:", status.entitlements);
      }
    },
  });

  return (
    // Your app content
  );
}
```
:::

Paywall events [#paywall-events]

The delegate also has callbacks for several paywall events, such dismissing, presenting, and more. Here's an example:

:::expo
```typescript
export class MySuperwallDelegate extends SuperwallDelegate {
  didPresentPaywall(paywallInfo: PaywallInfo): void {
    console.log("Paywall did present:", paywallInfo)
  }
}
```
:::