Superwall
Hooks

usePlacement

Purpose

The usePlacement hook is designed to handle the presentation of paywalls based on placements configured in your Superwall dashboard. It manages the state of paywall presentation and provides callbacks for various events.

Parameters

  • callbacks?: usePlacementCallbacks: An optional object containing callback functions for different paywall events.
    • usePlacementCallbacks:
      • onPresent?: (paywallInfo: PaywallInfo) => void: Called when a paywall is presented.
        • paywallInfo: PaywallInfo: Detailed information about the presented paywall (see SuperwallExpoModule.types.ts).
      • onDismiss?: (paywallInfo: PaywallInfo, result: PaywallResult) => void: Called when a paywall is dismissed.
        • paywallInfo: PaywallInfo: Information about the dismissed paywall.
        • result: PaywallResult: The result of the paywall interaction (e.g., purchased, declined, restored). See SuperwallExpoModule.types.ts.
      • onSkip?: (reason: PaywallSkippedReason) => void: Called when a paywall is skipped (e.g., due to holdout group, no audience match).
        • reason: PaywallSkippedReason: The reason why the paywall was skipped. See SuperwallExpoModule.types.ts.
      • onError?: (error: string) => void: Called when an error occurs during paywall presentation or other SDK operations related to this placement.
        • error: string: The error message.

Returned Values

An object containing:

  • registerPlacement: (args: RegisterPlacementArgs) => Promise<void>: A function to register a placement and potentially trigger a paywall.
    • RegisterPlacementArgs:
      • placement: string: The placement name as defined on the Superwall dashboard.
      • params?: Record<string, any>: Optional parameters to pass to the placement.
      • feature?: () => void: An optional function to execute if the placement does not result in a paywall presentation (i.e., the user is allowed through, or is already subscribed).
  • state: PaywallState: An object representing the current state of the paywall associated with this hook instance.
    • PaywallState:
      • { status: "idle" }
      • { status: "presented"; paywallInfo: PaywallInfo }
      • { status: "dismissed"; result: PaywallResult }
      • { status: "skipped"; reason: PaywallSkippedReason }
      • { status: "error"; error: string }

Usage

Present a paywall

How is this guide?

On this page