FeatureGate

FeatureGate renders its children when allowed is true and fallback when it is false. When to use

Around a feature that only some plans include, such as SSO settings or exports.
Around a menu item or button that leads to such a feature.
When the entitlement decision is still loading and you want nothing to show until it arrives.

Gates only change what the interface shows. Check the entitlement again on your server before doing the protected work.

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

Importing FeatureGate

import {
  FeatureGate,
  UpgradePrompt,
  type FeatureGateProps,
} from '@nozle-js/react'

Rendering FeatureGate

FeatureGate has no look of its own and fetches nothing: you pass the entitlement decision.

components/sso-settings.tsx

export function SsoSettings({ allowed }: { allowed: boolean }) {
  return (
    <FeatureGate allowed={allowed} fallback={<UpgradePrompt text="SSO needs the Scale plan" />}>
      <form>{/* SSO settings */}</form>
    </FeatureGate>
  )
}

Data

The gate needs one boolean, allowed, and optionally loading while you read it.

Live data

useEntitlement(featureCode) returns the customer’s can() result through your billingEndpoint:

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

export function Exports() {
  const entitlement = useEntitlement('data_exports')
  return (
    <FeatureGate
      allowed={entitlement.data?.allowed ?? false}
      loading={entitlement.isPending}
      fallback={<UpgradePrompt planName="Pro" />}
    >
      <button type="button">Export CSV</button>
    </FeatureGate>
  )
}

Examples

Upgrade prompt as fallback

An UpgradePrompt is the usual fallback. The screenshot shows the fallbacks of FeatureGate, PlanGate and UsageGate, each an UpgradePrompt.

export function Exports({ allowed, openPlans }: { allowed: boolean; openPlans: () => void }) {
  return (
    <FeatureGate allowed={allowed} fallback={<UpgradePrompt planName="Pro" onUpgrade={openPlans} />}>
      <button type="button">Export CSV</button>
    </FeatureGate>
  )
}

While the decision loads

With loading, the gate renders nothing, so the fallback does not flash before the decision arrives.

export function Exports({ allowed, loading }: { allowed: boolean; loading: boolean }) {
  return (
    <FeatureGate allowed={allowed} loading={loading} fallback={<UpgradePrompt planName="Pro" />}>
      <button type="button">Export CSV</button>
    </FeatureGate>
  )
}

API reference

boolean

required

true renders children; false renders fallback.

ReactNode

required

The protected content.

ReactNode

default:null

Rendered when allowed is false.

boolean

default:false

Renders nothing while true, so the fallback does not flash before the decision arrives.

States

State	What shows
`loading` is true	Nothing.
`allowed` is true	`children`.
`allowed` is false	`fallback`, or nothing without one.

Appearance

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

PlanGate

Gate by plan code.

UsageGate

Gate by usage and limit.

LockedOverlay

Show a blurred preview instead of hiding.

Feature gates

Combining gates with backend state.

Setup

Components

Billing

Entitlements

Importing FeatureGate

Rendering FeatureGate

Data

Live data

Examples

Upgrade prompt as fallback

While the decision loads

API reference

States

Appearance

PlanGate

UsageGate

LockedOverlay

Feature gates

​Importing FeatureGate

​Rendering FeatureGate

​Data

​Live data

​Examples

​Upgrade prompt as fallback

​While the decision loads

​API reference

​States

​Appearance

​Related

PlanGate

UsageGate

LockedOverlay

Feature gates

Importing FeatureGate

Rendering FeatureGate

Data

Live data

Examples

Upgrade prompt as fallback

While the decision loads

API reference

States

Appearance

Related