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 hook that provides access to RewardKit’s context values and methods.
​
Return Value
RewardKitContextValue

useRewardKit TSDoc

See in-depth technical documentation

​
Basic Usage

Here’s how to use the hook in your application: 
import { RewardKitProvider, useRewardKit } from '@boostxyz/reward-kit-react';

// Wrap your app with the provider
function App() {
  return (
    <RewardKitProvider
      theme={{ primary: "#4F46E5" }}
      config={{
        testnetsEnabled: true,
        creatorAddress: "0x123..."
      }}
    >
      <YourComponents />
    </RewardKitProvider>
  );
}

// Use the context in your components
function RewardsButton() {
  const { openModal, configure } = useRewardKit();

  const handleClick = () => {
    configure({ chainId: 1 }); // Update configuration
    openModal(); // Open the modal
  };

  return <button onClick={handleClick}>View Rewards</button>;
}

​
Theme Customization

Example showing theme customization: 
import { RewardKitProvider, useRewardKit } from '@boostxyz/reward-kit-react';

function ThemedRewards() {
  const customTheme = {
    primary: "#4F46E5",
    card: "#FFFFFF",
    accent: "#1F2937",
    secondary: "#E5E7EB"
  };

  return (
    <RewardKitProvider theme={customTheme}>
      <ThemeController />
    </RewardKitProvider>
  );
}

function ThemeController() {
  const { changeTheme } = useRewardKit();

  const toggleDarkMode = () => {
    changeTheme({
      card: "#1F2937",
      accent: "#FFFFFF",
      primary: "#374151"
    });
  };

  return (
    <button onClick={toggleDarkMode}>
      Switch to Dark Mode
    </button>
  );
}

​
Configuration Management

Example demonstrating dynamic configuration: 
import { RewardKitProvider, useRewardKit } from '@boostxyz/reward-kit-react';

function ConfigurableRewards() {
  const initialConfig = {
    testnetsEnabled: process.env.NODE_ENV === 'development',
    creatorAddress: "0x123..."
  };

  return (
    <RewardKitProvider config={initialConfig}>
      <RewardsFilter />
    </RewardKitProvider>
  );
}

function RewardsFilter() {
  const { configure, openModal } = useRewardKit();

  const filterByChain = (chainId: number) => {
    configure({
      chainId,
      targetContract: "0x456..."
    });
    openModal();
  };

  return (
    <div>
      <button onClick={() => filterByChain(1)}>
        Ethereum Rewards
      </button>
      <button onClick={() => filterByChain(137)}>
        Polygon Rewards
      </button>
    </div>
  );
}
Example showing modal state control: 
import { RewardKitProvider, useRewardKit } from '@boostxyz/reward-kit-react';

function ModalController() {
  const {
    isModalOpen,
    openModal,
    closeModal,
    toggleModal
  } = useRewardKit();

  return (
    <div>
      <button onClick={openModal}>
        Open Rewards
      </button>

      <button onClick={toggleModal}>
        {isModalOpen ? 'Close' : 'Open'} Rewards
      </button>

      {isModalOpen && (
        <button onClick={closeModal}>
          Close Modal
        </button>
      )}

      <div>Modal is {isModalOpen ? 'open' : 'closed'}</div>
    </div>
  );
}