FeatureGate

Import

import { FeatureGate } from "@billingos/sdk";

Basic usage

<FeatureGate feature="export_pdf">
  <ExportButton />
</FeatureGate>

Renders children only if the current user has access to the specified feature. Shows nothing by default when access is denied. Feature gate

Props

string

required

The feature key to check access for. Must match a feature key in your BillingOS dashboard.

ReactNode

required

Content to render when the user has access.

ReactNode

Content to render when access is denied. If omitted, nothing is rendered.

ReactNode

Content to render while the entitlement check is loading.

() => void

Called when the user doesn’t have access to the feature.

(usage: number, limit: number) => void

Called when the user has exceeded their usage quota.

boolean

Show remaining usage count as a badge.

Examples

With upgrade prompt fallback

<FeatureGate
  feature="custom_branding"
  fallback={
    <div className="p-4 border rounded">
      <p>Custom branding is available on the Pro plan.</p>
      <button onClick={() => router.push("/pricing")}>
        Upgrade
      </button>
    </div>
  }
>
  <BrandingEditor />
</FeatureGate>

With usage badge

<FeatureGate
  feature="api_calls"
  showUsageBadge={true}
  onQuotaExceeded={(usage, limit) => {
    toast.warning(`You've used ${usage}/${limit} API calls`);
  }}
>
  <ApiCallButton />
</FeatureGate>

With loading state

<FeatureGate
  feature="advanced_analytics"
  loading={<Skeleton className="h-64" />}
  fallback={<UpgradePrompt feature="advanced_analytics" />}
>
  <AnalyticsDashboard />
</FeatureGate>

Getting Started

Components

Hooks

Advanced

Import

Basic usage

Props

Examples

With upgrade prompt fallback

With usage badge

With loading state

​Import

​Basic usage

​Props

​Examples

​With upgrade prompt fallback

​With usage badge

​With loading state

Import

Basic usage

Props

Examples

With upgrade prompt fallback

With usage badge

With loading state