Skip to Content
DocumentationWhiteLabel Widget · Widget React SDKProvider Setup

Provider Setup

TaskOn widgets should be wrapped by TaskOnProvider.
ThemeProvider is optional and used when you want local theme control.

Note: the core import here means @taskon/widget-react/core, not @taskon/core.

TaskOnProvider

TaskOnProvider manages client initialization, session state, auth helpers, locale, and wallet context.

import { TaskOnProvider } from "@taskon/widget-react/core";
 
<TaskOnProvider
  config={{
    clientId: "YOUR_CLIENT_ID",
  }}
>
  {children}
</TaskOnProvider>

Props

PropTypeRequiredDescription
configTaskOnProviderConfigYesProvider configuration
childrenReactNodeYesChild components
preloadLocalesWidgetName[]NoOptional performance optimization: preload non-English locale bundles for listed widgets

TaskOnProviderConfig

FieldTypeRequiredDescription
clientIdstringYesTaskOn Client ID (X-API-Key)
locale"en" | "ko" | "ja" | "ru" | "es"NoForce locale (default: browser auto-detect)
walletConfigWalletConfigNoWallet adapter configuration
walletConnectProjectIdstringNoWalletConnect project ID
onRequestLogin() => voidNoTrigger host login UI when widget requests login

Where to Configure widgetId

When you use widget cloud mode, you need to create widget config in TaskOn dashboard first.

  1. Sign in at taskon.xyz 
  2. Open Business Entity Hub / White-Label / Widget
  3. Create widget config (Quest / Tasks / Leaderboard / User Center), then save
  4. Copy the generated widgetId and pass it to widget component props
import { QuestWidget } from "@taskon/widget-react/quest";
 
<QuestWidget widgetId={98765} />

If you do not want cloud config, you can skip this step and use local props directly (for example campaignId, config, or pageId depending on widget).

ThemeProvider

ThemeProvider applies local theme tokens to widgets when cloud theme is not injected by widgetId. You can mount multiple ThemeProvider instances or nest them. Widgets always read the nearest provider.

import { ThemeProvider } from "@taskon/widget-react/core";
 
<ThemeProvider
  theme={{
    mode: "auto",
    seed: { colorPrimary: "#2563eb" },
  }}
>
  {children}
</ThemeProvider>

Props

PropTypeRequiredDescription
themeTaskOnThemeConfigNoLocal theme configuration
childrenReactNodeYesChild components

Cloud Theme vs Local Theme

  • When a widget is rendered with widgetId, widget cloud config can inject theme automatically.
  • You can still override mode per widget with themeMode (light / dark / auto).
  • When no cloud theme is present, widgets use the nearest ThemeProvider (or SDK defaults).

Nested Theme Scope Example

App.tsx
import { TaskOnProvider, ThemeProvider } from "@taskon/widget-react/core";
import { QuestWidget } from "@taskon/widget-react/quest";
import { LeaderboardWidget } from "@taskon/widget-react/leaderboard";
 
function App() {
  return (
    <TaskOnProvider config={{ clientId: "YOUR_CLIENT_ID" }}>
      <ThemeProvider theme={{ mode: "light", seed: { colorPrimary: "#2563eb" } }}>
        <QuestWidget campaignId={12345} />
 
        <ThemeProvider theme={{ mode: "dark", seed: { colorPrimary: "#7c3aed" } }}>
          <LeaderboardWidget campaignId={12345} />
        </ThemeProvider>
      </ThemeProvider>
    </TaskOnProvider>
  );
}

Full Example

App.tsx
import { TaskOnProvider, ThemeProvider } from "@taskon/widget-react/core";
import { QuestWidget } from "@taskon/widget-react/quest";
 
function App() {
  return (
    <TaskOnProvider
      config={{
        clientId: "YOUR_CLIENT_ID",
        onRequestLogin: () => {
          // Open your login modal here
        },
      }}
    >
      <ThemeProvider
        theme={{
          mode: "auto",
          seed: { colorPrimary: "#2563eb" },
        }}
      >
        <QuestWidget campaignId={12345} />
      </ThemeProvider>
    </TaskOnProvider>
  );
}

For complete login flow (signature + useTaskOnAuth integration), see Authentication.

Last updated on
InstallationAuthentication