# usePlacement

A React hook that registers a placement so it can remotely trigger a paywall, gate feature access, and expose paywall-lifecycle state.

Purpose [#purpose]

Registers a placement so that, when it’s added to a campaign on the Superwall Dashboard, it can trigger a paywall and optionally gate access to a feature while exposing the paywall lifecycle as React state.

Signature [#signature]

```ts
function usePlacement(
  callbacks?: usePlacementCallbacks
): {
  /** Registers the placement and potentially presents a paywall. */
  registerPlacement: (args: RegisterPlacementArgs) => Promise<void>
  /** Current paywall-lifecycle state. */
  state: PaywallState
}
```

Parameters [#parameters]

<TypeTable
  type="{
  callbacks: {
    type: &#x22;usePlacementCallbacks?&#x22;,
    description: &#x22;Optional callbacks that fire at each stage of the paywall lifecycle.&#x22;,
  },
}"
/>

usePlacementCallbacks [#useplacementcallbacks]

<TypeTable
  type="{
  onPresent: {
    type: &#x22;(paywallInfo: PaywallInfo) => void&#x22;,
    description: &#x22;Called when a paywall is presented.&#x22;,
  },
  onDismiss: {
    type: &#x22;(paywallInfo: PaywallInfo, result: PaywallResult) => void&#x22;,
    description: &#x22;Called when a paywall is dismissed.&#x22;,
  },
  onSkip: {
    type: &#x22;(reason: PaywallSkippedReason) => void&#x22;,
    description: &#x22;Called when presentation is skipped (e.g., hold-out, no audience match).&#x22;,
  },
  onError: {
    type: &#x22;(error: string) => void&#x22;,
    description: &#x22;Called when the paywall fails to present or another SDK error occurs.&#x22;,
  },
}"
/>

RegisterPlacementArgs [#registerplacementargs]

<TypeTable
  type="{
  placement: {
    type: &#x22;string&#x22;,
    description: &#x22;Placement name as defined on the Superwall Dashboard.&#x22;,
    required: true,
  },
  params: {
    type: &#x22;Record<string, any>?&#x22;,
    description: &#x22;Optional parameters passed to the placement.&#x22;,
  },
  feature: {
    type: &#x22;() => void&#x22;,
    description: &#x22;Optional function queued when you register the placement. It runs whenever the SDK grants access: when presentation is skipped, after a successful purchase or restore, and on dismissals of non-gated paywalls. It does not run on paywall errors, or when a gated paywall is dismissed without purchasing.&#x22;,
  },
}"
/>

Returns / State [#returns--state]

<TypeTable
  type="{
  registerPlacement: {
    type: &#x22;(args: RegisterPlacementArgs) => Promise<void>&#x22;,
    description: &#x22;Registers a placement and potentially presents a paywall.&#x22;,
  },
  state: {
    type: &#x22;PaywallState&#x22;,
    description: &#x22;Current paywall lifecycle state for this hook instance.&#x22;,
  },
}"
/>

PaywallState [#paywallstate]

<TypeTable
  type="{
  idle: {
    type: &#x22;{ status: \&#x22;idle\&#x22; }&#x22;,
    description: &#x22;No placement has been registered yet.&#x22;,
  },
  presented: {
    type: &#x22;{ status: \&#x22;presented\&#x22;; paywallInfo: PaywallInfo }&#x22;,
    description: &#x22;A paywall is currently presented.&#x22;,
  },
  dismissed: {
    type: &#x22;{ status: \&#x22;dismissed\&#x22;; result: PaywallResult }&#x22;,
    description: &#x22;The paywall was dismissed with a result.&#x22;,
  },
  skipped: {
    type: &#x22;{ status: \&#x22;skipped\&#x22;; reason: PaywallSkippedReason }&#x22;,
    description: &#x22;Presentation was skipped (holdout, no audience match, etc.).&#x22;,
  },
  error: {
    type: &#x22;{ status: \&#x22;error\&#x22;; error: string }&#x22;,
    description: &#x22;An error occurred while presenting the paywall.&#x22;,
  },
}"
/>

Usage [#usage]

```tsx
import { Button, Text } from "react-native"
import { usePlacement } from "expo-superwall"

export default function PremiumButton() {
  const { registerPlacement, state } = usePlacement({
    onPresent: (info) => console.log("Paywall presented:", info.name),
    onDismiss: (_, result) =>
      console.log("Paywall dismissed:", result.type),
    onSkip: (reason) =>
      console.log("Paywall skipped:", reason.type),
    onError: (error) => console.error("Paywall error:", error),
  })

  const unlockFeature = async () => {
    await registerPlacement({
      placement: "MyFeaturePlacement",
      feature: () => {
        // Runs whenever Superwall grants access:
        // skipped presentations, successful purchases/restores,
        // or dismissals of non-gated paywalls.
        navigateToPremiumFeature()
      },
    })
  }

  return (
    <>
      <Button title="Unlock Feature" onPress={unlockFeature} />
      <Text>Current paywall state: {state.status}</Text>
    </>
  )
}
```

See also: [Present a paywall](/docs/expo/quickstart/present-first-paywall)