Skip to main content
<Paywall> renders its children only when the tenant has an active subscription. Otherwise it shows a customizable upgrade prompt.

Usage

import { Paywall } from 'crovver-react';

<Paywall>
  <PremiumDashboard />
</Paywall>

Props

PropTypeDefaultDescription
childrenReactNodeContent shown when subscribed
fallbackReactNodeBuilt-in upgrade promptContent shown when not subscribed
loadingFallbackReactNodenullContent shown while loading

Custom Fallback

<Paywall
  fallback={
    <div className="upgrade-banner">
      <h2>Subscribe to access this feature</h2>
      <UpgradeButton />
    </div>
  }
>
  <AnalyticsDashboard />
</Paywall>

Behavior

Subscription StatusWhat renders
LoadingloadingFallback
active or trialingchildren
past_due, canceled, expired, nonefallback