Leaderboard

Ranked leaderboard for one or more game entities. Supports Classic Quizzes, Match Quizzes, Top X games, and Template-based games. Multi-entity mode adds a dropdown selector and an aggregated "Overall" view across Classic Quiz entities.

Import

import { Leaderboard } from "fansunited-frontend-components";
import { LeaderboardEntity } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`entities`	`LeaderboardEntity[]`	One or more game entities.
`sdk`	`FansUnitedSDKModel`	SDK instance.
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`pageSize`	`number`	Entries per page (1–50).

Entities

interface LeaderboardEntity {
  id: string;
  type: "CLASSIC_QUIZ" | "MATCH_QUIZ" | "TOP_X" | "TEMPLATE";
  // (case-insensitive — "classic_quiz", "Classic_Quiz", etc. all work)
}

Type	Description
`CLASSIC_QUIZ`	Classic Quiz leaderboard.
`MATCH_QUIZ`	Match Quiz prediction leaderboard.
`TOP_X`	Top X picks game leaderboard.
`TEMPLATE`	Template-based game leaderboard.

Multi-entity behavior

Setup	Behavior
Single entity	No dropdown. The entity title and description are shown as a heading.
Mixed game types	A dropdown selector switches between entities. The first entity is selected by default.
Multiple Classic Quiz entities	An extra "Overall" option is prepended to the dropdown that aggregates rankings across all the Classic Quiz entities. "Overall" is the default selection.

Features

Highlighted current-user rank when the user is signed in.
Paginated results with configurable page size.
Custom branding colors are sourced from each entity automatically.
Light and dark mode supported via themeOptions.mode.

Examples

Single entity

<Leaderboard
  entities={[{ id: "quiz-123", type: "classic_quiz" }]}
  sdk={sdk}
  language="en"
/>

Multiple Classic Quiz entities (with Overall)

<Leaderboard
  entities={[
    { id: "quiz-123", type: "classic_quiz" },
    { id: "quiz-456", type: "classic_quiz" },
  ]}
  sdk={sdk}
  language="en"
  pageSize={20}
/>

Mixed game types

<Leaderboard
  entities={[
    { id: "topx-789", type: "top_x" },
    { id: "match-quiz-321", type: "match_quiz" },
    { id: "quiz-123", type: "classic_quiz" },
    { id: "template-654", type: "template" },
  ]}
  sdk={sdk}
  language="en"
  pageSize={10}
  themeOptions={{ mode: "dark" }}
/>