LumnGate

Feature gate component. Renders children only when the customer has access; shows fallback otherwise. Supports usage display.

typescript

import { LumnProvider, LumnGate } from '@lumnsh/react';

function App() {
  return (
    <LumnProvider apiKey={process.env.NEXT_PUBLIC_LUMN_API_KEY} baseUrl={process.env.NEXT_PUBLIC_LUMN_API_BASE_URL}>
      <LumnGate
        feature="pro_dashboard"
        customerId="user_123"
        fallback={(state) => <UpgradePrompt state={state} />}
        renderUsage={({ used, remaining, reset_at }) => (
          <p>{used} / {used + remaining} used, resets {reset_at}</p>
        )}
      >
        <ProDashboard />
      </LumnGate>
    </LumnProvider>
  );
}

LumnGateProps

Parameter reference

Parameter	Type	Required	Description	Example
feature	string	Required	The unique key of the feature to check.	'pro_dashboard'
customerId	string	Required	Required ID for customer-specific gating.	'user_123'
fallback	(state: FallbackState) => ReactNode	Optional	Custom render function when access is denied.	-
renderUsage	(data: LumnGateUsageData) => ReactNode	Optional	Callback to display usage data (used, remaining, reset_at).	-
children	ReactNode	Required	Content to render ONLY when the customer IS entitled.	-

Interactive UI & Output

Paste your API key above to try

Parameters

feature

customerId