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 context provider that manages the global state and configuration for RewardKit components, including theming, modal state, and reward filtering settings.
​
props
object
required

RewardKitProvider TSDoc

See in-depth technical documentation

​
Basic Usage

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

// Wrap your app with the provider
function App() {
  return (
    <RewardKitProvider
      // All configuration fields optional, tune your filters according to your application
      config={{
        testnetsEnabled: true,
        creatorAddress: "0x123...",
        boostId: "11155111:0x378632819F39C74c4F56B1429E760739c5fb51b7:33",
        budgetAccount: "0xd8f8d805f85518b2aedfe3148135bb6dce352aaf",
        targetContract: "0xdcffce9d8185706780a46cf04d9c6b86b3451497",
        chainId: 11155111,
        tokens: ["7777777:0x777777722d078c97c6ad07d9f36801e653e356ae", "7777777:0x777777722d078c97c6ad07d9f36801e653e356ae:1"]
      }}
      // All theme configuration optional
      theme={{
        accent: "#9a75ff",
        primary: "#25292e",
        "button-primary": "#25292e",
        "button-secondary": "#f6f7f9",
        "primary-foreground": "#fff",
        secondary: "#989fa9",
        card: "#f6f7f9",
        dialog: "#fff",
        "dialog-border": "#e5e7eb",
        "dialog-overlay": "rgba(0, 0, 0, 0.2)",
        skeleton: "#f7f6f8",
        dim: "#f7f6f8",
        scrollbar: "#989fa9",
      }}
      // Handy for developing locally
      defaultOpen={true}
    >
      <YourComponents />
    </RewardKitProvider>
  );
}

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

  const handleClick = () => {
    configure({ creatorAddress: "0x123..." }); // Update configuration
    openModal(); // Open the modal
  };

  return <button onClick={handleClick}>View Rewards</button>;
}
The RewardKit context system provides:
  • Centralized state management for rewards configuration
  • Theme customization through CSS variables
  • Modal visibility control
  • Auto-updating configuration
  • Integration with React Query and Wagmi
  • Shadow DOM isolation for styles
  • Memory routing for modal navigation
⌘I