Community Task Widget

CommunityTaskList displays sector-based community tasks and task dialogs.

Import


import { CommunityTaskList } from "@taskon/widget-react/community-task";

Usage

Cloud Config Mode


<CommunityTaskList widgetId={234} />

Local Mode (No `widgetId`)


<CommunityTaskList
  showSectorTab
  showSectorName
  showSectorDescription
  showSectorReward
/>

Key Props

Prop	Type	Description
`widgetId`	`number`	Load cloud config and theme
`themeMode`	`"light" \| "dark" \| "auto"`	Override cloud mode
`isPreview`	`boolean`	Preview mode
`sectorIds`	`number[]`	Restrict visible sectors
`showSectorTab`	`boolean`	Show/hide sector tab selector
`showSectorName`	`boolean`	Show/hide sector name
`showSectorDescription`	`boolean`	Show/hide sector description
`showSectorReward`	`boolean`	Show/hide sector rewards
`rewardDisplayMode`	`"popup" \| "redirect"`	Reward detail display mode
`rewardRedirectUrl`	`string`	Redirect URL when reward mode is redirect

URL Sync Props

Prop	Type	Description
`initialTaskId`	`number`	Open a task dialog initially
`onTaskOpen`	`(taskId: number) => void`	Called when task dialog opens/switches
`onTaskClose`	`() => void`	Called when task dialog closes
`initialTaskChainId`	`number`	Open TaskChain dialog initially
`onTaskChainOpen`	`(taskChainId: number) => void`	Called when TaskChain opens
`onTaskChainClose`	`() => void`	Called when TaskChain closes

Example

CommunityTasksPage.tsx


import { TaskOnProvider } from "@taskon/widget-react/core";
import { CommunityTaskList } from "@taskon/widget-react/community-task";
 
function CommunityTasksPage() {
  return (
    <TaskOnProvider config={{ clientId: "YOUR_CLIENT_ID" }}>
      <CommunityTaskList
        widgetId={234}
        initialTaskId={1001}
        onTaskOpen={(taskId) => {
          console.log("Open task", taskId);
        }}
      />
    </TaskOnProvider>
  );
}

Note on TaskChain

TaskChain experience is integrated inside CommunityTaskList.
There is no standalone public TaskChain widget export.