• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Reactfire
    • useCurrentOrganization
    • useCurrentUserRole
    • useIsSubscriptionActive
    • useUserSession
    • withAppProps
    • withTranslationProps
    • withAuthProps
    • withPipe
    • withMethodsGuard
    • withAuthedUser
    • withExceptionFilter
    • withCsrf

useIsSubscriptionActive

The "useIsSubscriptionActive" custom hook allows you to get a boolean to check if the organization subscription is active or not.

The useIsSubscriptionActive hook is a custom hook that allows you to determine whether the current organization has an active paid subscription. This can be useful if you want to display a message to the user if they are on a paid subscription, or if you want to restrict access to certain pages.

A subscription is considered active if it's either active or trialing. The useIsSubscriptionActive hook will return true if the current organization is on any paid subscription, regardless of plan.

To use this hook, simply import it from the ~/lib/organizations/hooks/use-is-subscription-active module, and then call it from your component. Here's an example:

tsx
import type { Stripe } from 'stripe';
import { useCurrentOrganization } from '~/lib/organizations/hooks/use-current-organization';
const ACTIVE_STATUSES: Stripe.Subscription.Status[] = ['active', 'trialing'];
/**
* @name useIsSubscriptionActive
* @description Returns whether the organization is on any paid
* subscription, regardless of plan.
*/
function useIsSubscriptionActive() {
const organization = useCurrentOrganization();
const status = organization?.subscription?.status;
if (!status) {
return false;
}
return ACTIVE_STATUSES.includes(status);
}
export default useIsSubscriptionActive;

Then, we can use this hook in our component:

tsx
import { useIsSubscriptionActive } from '~/lib/organizations/hooks/use-is-subscription-active';
function MyComponent() {
const isSubscriptionActive = useIsSubscriptionActive();
if (isSubscriptionActive) {
return <p>You are on a paid subscription!</p>;
} else {
return <p>You are not on a paid subscription.</p>;
}
}

In this example, the useIsSubscriptionActive hook is used to determine whether the current organization is on a paid subscription. The resulting isSubscriptionActive value is then used to render a message to the user.

It's worth noting that the useIsSubscriptionActive hook can be customized to fit your needs. For example, you could modify the ACTIVE_STATUSES constant to include additional subscription statuses, or you could use a different method to retrieve the subscription status.