User-Centric React Components

The User-Centric React Components are an npm-package alternative to the iframe-embedded User-Centric Widgets. They render the same widgets (quizzes, polls, predictors, lead forms, discussions, leaderboards, betslip, etc.) directly inside your React application, giving you native control over routing, state, theming, and bundle size.

What's in the box

Two npm packages, designed to be installed together:

Package	Purpose
`fansunited-frontend-components`	The React components themselves (UI).
`fansunited-frontend-core`	Shared types, theme tokens, hooks, providers, i18n, helpers, and constants.

Both packages must be installed. fansunited-frontend-components does not bundle fansunited-frontend-core — it imports types and utilities from it as a peer.

When to use React components vs. iframe embed

Scenario	Recommended
You build with React (Next.js, Vite, CRA, Remix, etc.) and want native rendering	React components
You need to control routing, navigation, or share auth state with the widget	React components
You want to ship the SDK only once across many widgets on a page	React components
You publish content in a CMS without a React stack (WordPress, plain HTML, etc.)	iframe embed
Quick drop-in for marketing/landing pages	iframe embed

Available components

Component	Purpose
`ClassicQuizPlay`	Traditional quiz with scoring and answer explanations
`PollVote`	Real-time polling with single/multiple choice voting
`PersonalityQuizPlay`	Personality assessment with persona matching
`MatchQuizPlay`	Football match prediction with multiple markets and points
`EventGamePlay`	Generic event prediction (boolean/number/enum/free input)
`PickThePair`	Pair-matching game with casual and challenge modes
`ChanceGame`	Prize Wheel, Penalty Shootout, and Pick One of X variants
`EitherOrPlay`	Binary choice game with rounds and standings
`CollectLead`	Lead capture forms with custom fields and consents
`Discussion`	Threaded comments with reactions and reporting
`Leaderboard`	Ranked standings across one or more game entities
`Predictor`	Multi-tab seasonal predictor with leaderboard, leagues, prizes
`Betslip`	Floating betslip with bookmaker deep-link integration

Key design principles

Shadow DOM isolation — every component renders inside its own shadow root. Host page CSS cannot leak in, and component styles cannot leak out.
Theme-first — every component accepts the same CustomThemeOptions object. Set it once via ThemeProvider, or pass it per component.
i18n built-in — 14 supported languages. Pass language per component, or initialize globally via initializeI18n().
SDK-driven — components consume a FansUnitedSDKModel instance. No props are needed for content — entity IDs resolve via the SDK.
Tree-shakeable — import only the components you use.

Supported languages

English (en), Bulgarian (bg), German (de), Greek (el), Spanish (es), French (fr), Belgian French (fr-be), Italian (it), Polish (pl), Portuguese (pt), Brazilian Portuguese (pt-br), Romanian (ro), Serbian (sr), Slovak (sk).

Peer dependencies

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
}

Next steps

Getting Started — install, set up the SDK, and render your first component
Core Concepts — templates, theming, lead collection, CTAs, and other shared configuration
Components — per-component API references and examples