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.