Documentation menuReact
React
Feature gates, limits and license checks in React.
npm i @sweberdev/integral @sweberdev/integral-react
import { createEntitlements } from "@sweberdev/integral";
import { Feature, IntegralProvider, Limit, useFeature } from "@sweberdev/integral-react";
const entitlements = createEntitlements({ plans, license });
<IntegralProvider entitlements={entitlements}>
<App />
</IntegralProvider>;
Feature
<Feature name="export" fallback={<UpgradeHint />}>
<ExportButton />
</Feature>
name can be an array; then all features are required.
Limit
<Limit name="projects" used={projects.length} fallback={(c) => <p>{c.limit} projects is the limit of your plan.</p>}>
<NewProjectButton />
</Limit>
Children and fallback can be render functions that receive { limit, used, remaining, allowed }.
Hooks
useEntitlements()returns the entitlements object.useFeature("export")returns a boolean.useLimit("projects", used, amount?)returns the limit check.useLicenseCheck(check, key)runs an async check (for example Polar validation wrapped inwithOfflineGrace) wheneverkeychanges, and returnsstatus(idle,loading,valid,invalid,error),resultandrefresh(). Passnullas key to skip.
const { status } = useLicenseCheck((key) => checkWithGrace(key), licenseKey || null);
Hide features in the UI for convenience, but enforce them where it matters: on your server for paid APIs, or in the code path itself for desktop apps.
For a ready-made activation form, renewal and upgrade prompt, see Integral Pro portal.