Share CTA

ClassicQuizPlay renders a Share Result button on its results screen. By default the button uses the browser's navigator.share, falls back to an Android bridge if present, and to clipboard copy otherwise. The shareCTA prop lets the host application replace this behavior with its own button, handler, or component — same shape as signInCTA and additionalCTA.

Use shareCTA to replace the share UX. Use callbacks.onShare to observe the default share UX without replacing it. See Callbacks.

ShareCTADetails

interface ShareCTADetails {
  defaultLabel?: string;
  onClick?: () => void;
  url?: string | null;
  target?: LinkTargetType; // "_blank" | "_self" | "_parent" | "_top"
  component?: React.ReactElement | null;
}

Field	Description
`defaultLabel`	Button label. Required unless `component` is provided.
`onClick`	Click handler. Use for custom share modals or programmatic share.
`url`	Destination URL. Use for redirect-style sharing (e.g. a sharing landing page).
`target`	Anchor target. Defaults to `_self`.
`component`	Custom React element rendered in place of the default share button.

Priority order

Same rendering rules as signInCTA / additionalCTA, with one extra rung at the bottom: the built-in default share.

component — if provided, the custom React element is rendered.
onClick — if provided (and no component), a button calls the handler.
url — if provided (and no component/onClick), a button navigates to the URL.
Default share — if shareCTA is omitted entirely, the built-in button runs navigator.share → Android bridge → clipboard copy.

Choosing any of priorities 1–3 disables the default share behavior. If you want to keep native share and be notified, omit shareCTA and use callbacks.onShare instead.

Example — analytics-only, keep default share

<ClassicQuizPlay
  {...otherProps}
  // shareCTA omitted → default navigator.share / clipboard runs
  callbacks={{
    onShare: (summary) => analytics.track("quiz_shared", summary),
  }}
/>

Example — custom share modal

import { ShareCTADetails } from "fansunited-frontend-core";

const shareCTA: ShareCTADetails = {
  defaultLabel: "Share Result",
  onClick: () => openMyShareModal(),
};

<ClassicQuizPlay {...otherProps} shareCTA={shareCTA} />

Example — share landing page

const shareCTA: ShareCTADetails = {
  defaultLabel: "Share",
  url: "https://example.com/share?quiz=123",
  target: "_blank",
};

Example — fully custom component

const shareCTA: ShareCTADetails = {
  component: <MyShareButton onShare={handleShare} />,
};

Supported components

ClassicQuizPlay only.