Skip to main content
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.
⌘I