Skip to main content
Often, you’ll need to show your customers how much usage they have available on your UI. You can use our API to do this.

​
Show current totals

Most usage information for a customer is available when you evaluate a customer’s feature access via the feature access endpoint. 
import { useFeatureAccess } from "priceos/react";
import type { MyFeatures } from "./priceos.types";

export function CreditsUsageCard() {
  const { usage, isUnlimited, limit, isLoading } = useFeatureAccess<MyFeatures>("credits");

  if (isLoading) return <div>Loading...</div>;
  if (!usage) return <div>No usage data available.</div>;

  const used = usage.used;
  const effectiveLimit = isUnlimited ? null : limit;
  const hasReachedLimit = usage.hasReachedLimit;
  const bonusRemaining = usage.bonusRemaining;
  const bonusUsed = usage.bonusUsed;
  const nextReset = usage.nextReset;
  const label = isUnlimited ? "Unlimited" : `${used} / ${effectiveLimit}`;

  return (
    <div>
      <p>Credits used: {label}</p>
      <p>Bonus remaining: {bonusRemaining}</p>
      <p>Bonus used: {bonusUsed}</p>
      <p>Limit reached: {hasReachedLimit ? "Yes" : "No"}</p>
      <p>Next reset: {nextReset ? new Date(nextReset).toLocaleString() : "N/A"}</p>
    </div>
  );
}

​
The limit field is the base limit set in the feature. It does not include any bonuses.

​
Show usage history

If you want an list of all the usage events, then you can use our list usage events endpoint. 
import { useUsageEvents } from "priceos/react";
import type { MyFeatures } from "./priceos.types";

export function CreditsUsageHistory() {
  const { usageEvents, hasMore, getMore, isLoading } = useUsageEvents<MyFeatures>("credits", {
    period: "current",
    limit: 20,
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <ul>
        {usageEvents.map((event) => (
          <li key={event.id}>
            {event.amount} at {new Date(event.occurredAt).toLocaleString()}
          </li>
        ))}
      </ul>
      {hasMore ? <button onClick={() => void getMore()}>Load more</button> : null}
    </div>
  );
}
You can pass customRange to fetch a specific time window. Provide either customRange or period, not both.