PlanGate

PlanGate renders its children when currentPlan is one of allowedPlans, and fallback otherwise. When to use

Around a section sold as part of higher plans, when no single entitlement describes it.
When an allowlist of plan codes, compared exactly, decides access.

Prefer FeatureGate with an entitlement when one exists: it keeps working when you add plans. Gates only change what the interface shows. Check access again on your server.

Three UpgradePrompt fallbacks shown by FeatureGate, PlanGate and UsageGate, light theme

Importing PlanGate

import {
  PlanGate,
  UpgradePrompt,
  type PlanGateProps,
} from '@nozle-js/react'

Rendering PlanGate

PlanGate has no look of its own and fetches nothing: you pass the customer’s plan code.

components/team-settings.tsx

export function TeamSettings({ planCode }: { planCode: string }) {
  return (
    <PlanGate currentPlan={planCode} allowedPlans={['pro', 'scale']} fallback={<UpgradePrompt planName="Pro" />}>
      <section>{/* Team settings */}</section>
    </PlanGate>
  )
}

Data

The gate needs the customer’s plan code as currentPlan. It has no loading state; render nothing yourself while the plan loads.

Live data

Take the plan code from useSubscription:

import { useSubscription } from '@nozle-js/react'

export function Analytics() {
  const { data, isPending } = useSubscription()
  if (isPending) return null
  return (
    <PlanGate
      currentPlan={data?.subscription?.plan_code ?? ''}
      allowedPlans={['pro', 'scale']}
      fallback={<UpgradePrompt planName="Pro" />}
    >
      <div>{/* Analytics */}</div>
    </PlanGate>
  )
}

Examples

Upgrade prompt as fallback

Any plan not in allowedPlans gets the fallback, usually an UpgradePrompt. The screenshot shows the fallbacks of FeatureGate, PlanGate and UsageGate, each an UpgradePrompt.

export function AuditLog({ planCode, openPlans }: { planCode: string; openPlans: () => void }) {
  return (
    <PlanGate currentPlan={planCode} allowedPlans={['scale']} fallback={<UpgradePrompt planName="Scale" onUpgrade={openPlans} />}>
      <section>{/* Audit log */}</section>
    </PlanGate>
  )
}

API reference

string

required

The customer’s plan code.

string[]

required

Plan codes that may see children, compared exactly.

ReactNode

required

The plan-gated content.

ReactNode

default:null

Rendered for any plan not in allowedPlans.

States

State	What shows
`currentPlan` in `allowedPlans`	`children`.
Any other plan	`fallback`, or nothing without one.

PlanGate has no loading state.

Appearance

PlanGate takes no appearance and has no element keys; style the fallback you pass.

FeatureGate

Gate by entitlement.

PlanBadge

Show the customer’s plan.

Setup

Components

Billing

Entitlements

Importing PlanGate

Rendering PlanGate

Data

Live data

Examples

Upgrade prompt as fallback

API reference

States

Appearance

FeatureGate

PlanBadge

​Importing PlanGate

​Rendering PlanGate

​Data

​Live data

​Examples

​Upgrade prompt as fallback

​API reference

​States

​Appearance

​Related

FeatureGate

PlanBadge

Importing PlanGate

Rendering PlanGate

Data

Live data

Examples

Upgrade prompt as fallback

API reference

States

Appearance

Related