useMantle() hook

The useMantle() hook allows you to access properties and actions which are surfaced by the MantleProvider’s context, and can be accessed by calling useMantle() from within a functional React component, like so:

/**
 * @typedef TMantleContext
 * @property {Customer} customer - The current customer
 * @property {Subscription} subscription - The current subscription
 * @property {Array.<Plan>} plans - The available plans
 * @property {boolean} loading - Whether the current customer is loading
 * @property {RefetchCallback} refetch - Refetch the current customer
 * @property {SendUsageEventCallback} sendUsageEvent - Send a new usage event to Mantle
 * @property {GetUsageReportCallback} getUsageReport - Get a usage report
 * @property {SubscribeCallback} subscribe - Subscribe to a new plan
 * @property {CancelSubscriptionCallback} cancelSubscription - Cancel the subscription
 * @property {FeatureEnabledCallback} isFeatureEnabled - Check if a feature is enabled
 * @property {FeatureLimitCallback} limitForFeature - Get the limit for a feature
 */
const mantle = useMantle();

// Access the current customer
const { customer } = mantle;

// Access available plans
const { plans } = mantle;

// Subscribe to a new plan and present charge screen
const newSubscription = await mantle.subscribe({ planId: 'plan-id', discountId: 'discount-id', returnUrl: 'settings' });
window.open(newSubscription.confirmationUrl, '_top');

Check out the @heymantle/react project to learn more.