Guides

Feature management

Feature usage

The useMantle() hook provides several ways to check and control feature access in your frontend code. Whether you're checking if a feature is enabled, tracking usage against limits, or implementing feature gates, Mantle gives you the tools to manage feature access consistently.

Checking feature availability

For simple boolean features, check if they're enabled:

function CustomIconsPanel() {
  const { isFeatureEnabled } = useMantle();
  const hasCustomIcons = isFeatureEnabled({featureKey: 'custom_icons'});
  
  if (!hasCustomIcons) {
    return <UpgradePrompt feature="custom_icons" />;
  }
  
  return <IconEditor />;
}
💡

Setup guide: Learn how to create boolean features in the Mantle UI in our Features and entitlements guide.

Tracking usage limits

For features with numerical limits, check current usage and remaining capacity:

function ProductsList() {
  const { customer, limitForFeature } = useMantle();
  const limit = limitForFeature({featureKey: 'products'});
  const used = customer.usage['Products'].currentValue;
  const remaining = limit - used;
  
  return (
    <div>
      <Header>Products ({used}/{limit})</Header>
      {remaining > 0 ? (
        <AddProductButton />
      ) : (
        <UpgradePrompt feature="products" />
      )}
    </div>
  );
}
💡

Setup guide: Set up limited features with usage tracking in the Limited features section of our documentation.

Understanding usage periods

Usage data includes different time periods to support various billing models:

const { customer } = useMantle();
const usage = customer.usage['Products'];

// Different usage periods available
{
  monthToDateValue,            // Usage since start of month
  currentBillingPeriodValue,   // Usage in current billing cycle
  currentValue,                // Based on feature's period setting
  currentPeriodStartDate,      // When current period began
  currentPeriodEndDate         // When current period ends
}
💡

Setup guide: Configure usage metrics to track usage over time in the Usage events and metrics guide.

Feature overrides

Features can be overridden at the customer level, independent of their plan. Always check actual availability rather than assuming based on plan level:

function BetaFeature() {
  const { isFeatureEnabled, customer } = useMantle();
  
  // This considers both plan entitlements and customer overrides
  const hasAccess = isFeatureEnabled({featureKey: 'beta_feature'});
  
  return hasAccess ? <FeatureUI /> : null;
}
💡

Setup guide: Learn how to set up feature overrides for specific customers in the Configuring features per plan section.

For more details, check out the @heymantle/react library documentation.

Updated over 1 year ago

Did this page help you?