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 Query hook that fetches paginated RewardKit Boosts with flexible filtering options. Supports filtering by creator, claimant, budget account, target contract, tokens, and chain ID.
​
params
object
​
Return Value
UseQueryResult<RewardKitBoostsResponse>

useRewardKitBoosts TSDoc

See in-depth technical documentation

​
Basic Usage

Here’s a simple example of fetching and displaying boosts: 
import { useRewardKitBoosts } from '@boostxyz/reward-kit-react';
import { RewardKitBoostStatus } from '@boostxyz/reward-kit-react';

function BoostsList() {
  const { data, isPending } = useRewardKitBoosts({
    creatorAddress: "0x123...",
    claimantAddress: "0x456...",
    status: RewardKitBoostStatus.ACTIVE
  });

  if (isPending) return <div>Loading boosts...</div>;

  return (
    <div>
      <h2>Available Boosts</h2>
      <ul>
        {data?.boosts.map((boost, index) => (
          <li key={index}>
            {boost.name} - {boost.status}
          </li>
        ))}
      </ul>
    </div>
  );
}

​
Advanced Filtering

Example showing how to use multiple filters: 
import { useRewardKitBoosts } from '@boostxyz/reward-kit-react';

function FilteredBoostsList() {
  const {
    data,
    isPending,
    error
  } = useRewardKitBoosts({
    // Filter by creator
    creatorAddress: "0x123...",

    // Filter by chain
    chainId: 1,

    // Filter specific tokens
    tokens: [
      "1:0xabc...def", // ETH token
      "137:0x789...123" // Polygon token
    ],

    // Filter by target contract
    targetContract: "0xdef...",

    // Pagination
    pageSize: 10,
    page: 1
  });

  if (error) {
    return <div>Error loading boosts: {error.message}</div>;
  }

  return (
    <div className="boosts-container">
      {isPending ? (
        <div>Loading filtered boosts...</div>
      ) : (
        <div>
          <h2>Filtered Boosts</h2>
          {data?.boosts.length === 0 ? (
            <p>No boosts found matching filters</p>
          ) : (
            <ul>
              {data?.boosts.map((boost, index) => (
                <li key={index}>
                  <h3>{boost.name}</h3>
                  <p>Chain: {boost.chainId}</p>
                  <p>Status: {boost.status}</p>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}

​
With Pagination

Example implementing paginated boosts: 
import { useRewardKitBoosts } from '@boostxyz/reward-kit-react';
import { useState } from 'react';

function PaginatedBoosts() {
  const [page, setPage] = useState(1);
  const pageSize = 20;

  const {
    data,
    isPending,
    refetch
  } = useRewardKitBoosts({
    creatorAddress: "0x123...",
    pageSize,
    page
  });

  const handleNextPage = () => {
    setPage(prev => prev + 1);
  };

  const handlePrevPage = () => {
    setPage(prev => Math.max(1, prev - 1));
  };

  return (
    <div>
      <div className="boosts-list">
        {isPending ? (
          <div>Loading page {page}...</div>
        ) : (
          <>
            <div className="boosts-grid">
              {data?.boosts.map((boost, index) => (
                <div key={index} className="boost-card">
                  <h3>{boost.name}</h3>
                  <div className="boost-details">
                    <span>Chain: {boost.chainId}</span>
                    <span>Status: {boost.status}</span>
                  </div>
                </div>
              ))}
            </div>

            <div className="pagination-controls">
              <button
                onClick={handlePrevPage}
                disabled={page === 1}
              >
                Previous
              </button>
              <span>Page {page}</span>
              <button
                onClick={handleNextPage}
                disabled={!data?.boosts.length}
              >
                Next
              </button>
            </div>
          </>
        )}
      </div>

      <button
        onClick={() => refetch()}
        className="refresh-button"
      >
        Refresh Boosts
      </button>
    </div>
  );
}
The hook automatically handles address normalization and includes built-in caching with a 5-minute stale time. It only makes requests when a valid claimant address is provided and normalizes all addresses to lowercase before making the API request.