Skip to main content
<FeatureGuard> checks a feature key against the tenant’s plan and renders either the protected content or a fallback.

​
Usage

import { FeatureGuard } from 'crovver-react';

<FeatureGuard featureKey="advanced_analytics" fallback={<UpgradePrompt />}>
  <AnalyticsDashboard />
</FeatureGuard>

​
Props

PropTypeRequiredDescription
featureKeystring✅Feature to check against the tenant’s plan
childrenReactNode✅Rendered when access is granted
fallbackReactNodeRendered when access is denied
loadingFallbackReactNodeRendered while checking

​
Fallback with Upgrade CTA

import { FeatureGuard, useBillingRedirect } from 'crovver-react';

function UpgradePrompt() {
  const { redirectToCheckout } = useBillingRedirect();
  return (
    <div>
      <p>This feature requires a higher plan.</p>
      <button onClick={() => redirectToCheckout({ requiredFeature: 'custom_domain' })}>
        Upgrade
      </button>
    </div>
  );
}

<FeatureGuard featureKey="custom_domain" fallback={<UpgradePrompt />}>
  <DomainSettings />
</FeatureGuard>

​
vs useFeatureAccess

Use <FeatureGuard> for declarative JSX gating. Use useFeatureAccess when you need to control behavior imperatively (e.g., disable a button, redirect programmatically).