Leaderboard Widget

LeaderboardWidget renders multi-tab leaderboard views (all-time, campaign, sprint).

Import


import { LeaderboardWidget } from "@taskon/widget-react/leaderboard";

Usage

Cloud Config Mode


<LeaderboardWidget widgetId={456} />

Local Config Mode (No `widgetId`)


import type { LeaderboardContentConfig } from "@taskon/core";
 
const config: LeaderboardContentConfig = {
  leaderboards: [],
  displayOptions: {
    showTitle: true,
    rows: 10,
  },
};
 
<LeaderboardWidget config={config} />

Key Props

Prop	Type	Description
`widgetId`	`number`	Load function config and theme from cloud
`themeMode`	`"light" \| "dark" \| "auto"`	Override cloud mode
`config`	`LeaderboardContentConfig`	Local leaderboard config
`defaultTabId`	`string`	Default active tab
`onTabChange`	`(tabId: string) => void`	Callback on tab switch
`onUserClick`	`(userId: number, userName: string) => void`	Callback when a row user is clicked
`className`	`string`	Custom wrapper class
`style`	`React.CSSProperties`	Custom wrapper style

widgetId or config should provide a valid leaderboard configuration.

Example

LeaderboardPage.tsx


import { TaskOnProvider } from "@taskon/widget-react/core";
import { LeaderboardWidget } from "@taskon/widget-react/leaderboard";
 
function LeaderboardPage() {
  return (
    <TaskOnProvider config={{ clientId: "YOUR_CLIENT_ID" }}>
      <LeaderboardWidget widgetId={456} />
    </TaskOnProvider>
  );
}

Leaderboard Widget

Import

Usage

Cloud Config Mode

Local Config Mode (No widgetId)

Key Props

Example

Local Config Mode (No `widgetId`)