Reward Kit is still in early alpha, and may contain bugs or unexpected behavior.

The Boost V2 Docs are under active development and will be subject to changes.

A React hook that returns the count of claimable boosts available for a given claimant address.

​
config
object
required

Configuration options for the hook

​
Return Value
object

useClaimableBoostsCount TSDoc

See in-depth technical documentation

​
Usage Example

Here’s how to use the useClaimableBoostsCount hook in a React component:

import { useClaimableBoostsCount } from '@boostxyz/reward-kit-react';

function BoostCounter() {
  // Set up configuration
  const config = {
    creatorAddress: "0x123...", // Creator's Ethereum address
    claimantAddress: "0x456...", // Claimant's Ethereum address
    // ... other RewardKit config options
  };

  // Use the hook
  const { isPending, count } = useClaimableBoostsCount(config);

  // Handle loading state
  if (isPending) {
    return <div>Loading available boosts...</div>;
  }

  // Render the count
  return (
    <div>
      You have {count} boosts available to claim
    </div>
  );
}

​
Loading States

The hook provides an isPending boolean that you can use to handle loading states in your UI:

function BoostDisplay() {
  const { isPending, count } = useClaimableBoostsCount({
    creatorAddress: "0x123...",
    claimantAddress: "0x456..."
  });

  // Show loading spinner while data is being fetched
  if (isPending) {
    return <LoadingSpinner />;
  }

  // Show different messages based on count
  if (count === 0) {
    return <p>No boosts available to claim</p>;
  }

  return <p>{count} boosts ready to claim</p>;
}

The hook automatically handles fetching and caching of boost data through the useRewardKitProfile hook internally.