Skip to Content
DocumentationWhiteLabel Widget · Widget React SDKInstallation

Installation

Requirements

  • React 18 or 19
  • TypeScript 5.0+ (recommended)

Install

npm install @taskon/widget-react @taskon/core

Entry Points

@taskon/widget-react provides multiple entry points for tree-shaking and CSS code splitting:

@taskon/widget-react/core is the widget-react sub-entry (React providers/hooks),
not the separate @taskon/core API client package.

Entry PointImport PathWhat’s Included
Core@taskon/widget-react/coreProviders, hooks, locale helpers, minimal base CSS
Quest@taskon/widget-react/questQuest widget only
Community Task@taskon/widget-react/community-taskCommunity task widget only
Leaderboard@taskon/widget-react/leaderboardLeaderboard widget only
User Center@taskon/widget-react/user-centerUser center widget only
Page Builder@taskon/widget-react/page-builderPage composer widget
All@taskon/widget-reactEverything (all widgets + all CSS)
// Core imports
import { TaskOnProvider, ThemeProvider } from "@taskon/widget-react/core";
 
// Widget imports (load only what you use)
import { QuestWidget } from "@taskon/widget-react/quest";
import { CommunityTaskList } from "@taskon/widget-react/community-task";

Full Import (Convenient, but larger bundle)

import {
  TaskOnProvider,
  ThemeProvider,
  QuestWidget,
  CommunityTaskList,
} from "@taskon/widget-react";

CSS Handling

Widget styles are injected automatically by each entry point.
No extra CSS import is required.

widgetId and Local Mode

  • widgetId mode: configure widget in taskon.xyz  dashboard (Business Entity Hub / White-Label / Widget) and use generated numeric ID at runtime.
  • Local mode: do not pass widgetId; render widgets with local props (campaignId, config, pageId, etc.).
Last updated on
Quick StartProvider Setup