Callbacks

Most play components accept a callbacks prop — an object of optional functions the host application can register to observe what happens inside the component without owning the rendering. Use it for analytics, host-side state hydration, or kicking off follow-up flows when a user finishes / shares.

Callbacks are fire-and-forget observers — they never block rendering, never receive a return value, and never replace built-in behavior. To override UX (e.g. replace the share button), use the matching CTA prop (shareCTA, additionalCTA, etc.) instead.

Shape per component

Each component exposes a typed callbacks object. The shape is consistent — only the payload type differs based on the component's underlying SDK model.

// ClassicQuizPlay
interface ClassicQuizPlayCallbacks {
  onFinish?: (summary: ClassicQuizUserParticipationModel) => void;
  onShare?: (summary: ClassicQuizUserParticipationModel) => void;
}

// PollVote
interface PollVoteCallbacks {
  onFinish?: (vote: SinglePollVoteModel) => void;
}

// PersonalityQuizPlay
interface PersonalityQuizPlayCallbacks {
  onFinish?: (summary: PersonalityQuizParticipationModel) => void;
}

// MatchQuizPlay
interface MatchQuizPlayCallbacks {
  onFinish?: (prediction: PredictionResponseModel) => void;
}

// EventGamePlay
interface EventGamePlayCallbacks {
  onFinish?: (prediction: EventGamePredictionModel) => void;
}

// EitherOrPlay
interface EitherOrPlayCallbacks {
  onFinish?: (participation: EitherOrParticipationModel) => void;
}

onFinish

Fires when the user completes a participation in the current session — i.e. their submit / vote / prediction call has just succeeded.

The full SDK participation model (score, picks, points, prediction details, etc.) is passed to the callback so the host can react without re-fetching.

onFinish does not fire when the component loads onto an already-finished state (e.g. revisiting a settled game, opening a quiz where max attempts are already reached). It fires only on a fresh participation event in the current session.

Example

import { ClassicQuizPlay } from "fansunited-frontend-components";

<ClassicQuizPlay
  {...otherProps}
  callbacks={{
    onFinish: (summary) => {
      analytics.track("quiz_completed", {
        quizId: summary.classicQuizId,
        correct: summary.correct,
        total: summary.classicQuizQuestions,
      });
    },
  }}
/>

onShare

ClassicQuizPlay only. Fires when the user clicks the default share button — i.e. when no shareCTA override is provided and the built-in navigator.share / Android bridge / clipboard fallback runs.

If you override the share button via shareCTA.onClick / shareCTA.url / shareCTA.component, your own handler is the source of truth — onShare does not fire, because you're already in control. See Share CTA for the override path.

<ClassicQuizPlay
  {...otherProps}
  callbacks={{
    onShare: (summary) => {
      analytics.track("quiz_shared", { quizId: summary.classicQuizId });
    },
  }}
/>

Payload models

Each callback receives the SDK participation model as its only argument. The shapes are defined in fansunited-sdk-esm and listed below for reference. Import the type when you need it:

import type {
  ClassicQuizUserParticipationModel,
  SinglePollVoteModel,
  PersonalityQuizParticipationModel,
  PredictionResponseModel,
  EventGamePredictionModel,
  EitherOrParticipationModel,
} from "fansunited-sdk-esm";

ClassicQuizUserParticipationModel

Passed to ClassicQuizPlay's onFinish and onShare.

SinglePollVoteModel

Passed to PollVote's onFinish. Extends PollVoteBasicModel.

PersonalityQuizParticipationModel

Passed to PersonalityQuizPlay's onFinish.

PredictionResponseModel

Passed to MatchQuizPlay's onFinish.

At submit time fixtures[].result is empty — results are resolved server-side once the underlying matches finish.

EventGamePredictionModel

Passed to EventGamePlay's onFinish.

At submit time status is ACTIVE and fixtures[].correct / points are unresolved. Settlement values appear after the underlying event is settled.

EitherOrParticipationModel

Passed to EitherOrPlay's onFinish.

Composition

callbacks is independent of every other prop. You can combine it with CTA overrides, lead capture, theming, etc. on the same component:

<ClassicQuizPlay
  {...otherProps}
  shareCTA={{ onClick: openCustomShareModal }}  // override UX
  callbacks={{
    onFinish: (summary) => analytics.track("quiz_completed", summary),
    // onShare omitted — shareCTA.onClick handles its own analytics
  }}
/>

Supported components

ClassicQuizPlay, PollVote, PersonalityQuizPlay, MatchQuizPlay, EventGamePlay, EitherOrPlay.