User Center Widget

UserCenterWidget displays user rewards, identity data, and activity history tabs.

Import


import { UserCenterWidget } from "@taskon/widget-react/user-center";

Usage

Cloud Config Mode


<UserCenterWidget widgetId={789} />

Local Config Mode (No `widgetId`)


import type { UserCenterConfig } from "@taskon/core";
 
const config: UserCenterConfig = getUserCenterConfigFromYourServer();
 
<UserCenterWidget config={config} />

Key Props

Prop	Type	Description
`widgetId`	`number`	Load config and theme from cloud
`themeMode`	`"light" \| "dark" \| "auto"`	Override cloud mode
`config`	`UserCenterConfig`	Local tab configuration
`defaultTab`	`UserCenterTabType`	Default tab
`defaultRewardCard`	`UserCenterRewardCardType`	Default reward card in My Rewards
`defaultPointId`	`number`	Default point ID when reward card is points
`onTabChange`	`(tab) => void`	Callback on tab switch
`className`	`string`	Custom wrapper class
`style`	`React.CSSProperties`	Custom wrapper style

widgetId or config should provide a valid User Center setup.

Example

UserCenterPage.tsx


import { TaskOnProvider } from "@taskon/widget-react/core";
import { UserCenterWidget } from "@taskon/widget-react/user-center";
 
function UserCenterPage() {
  return (
    <TaskOnProvider config={{ clientId: "YOUR_CLIENT_ID" }}>
      <UserCenterWidget widgetId={789} />
    </TaskOnProvider>
  );
}

User Center Widget

Import

Usage

Cloud Config Mode

Local Config Mode (No widgetId)

Key Props

Example

Local Config Mode (No `widgetId`)