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:

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:

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.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS