Internationalization

Every component accepts a language prop. The widget renders all its UI text in that language, using a translation bundle shipped with fansunited-frontend-core.

Supported languages

type LanguageType =
  | "ar" | "en" | "bg" | "de" | "el" | "es" | "fr" | "fr-be"
  | "it" | "pl" | "pt" | "pt-br" | "ro" | "sk" | "sr";

Per-component usage

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

<ClassicQuizPlay
  entityId="quiz-123"
  sdk={sdk}
  template={WidgetTemplate.STANDARD}
  language="pt-br"
/>

Text direction (RTL)

There is no direction prop. Direction is derived from language, so setting
language="ar" is all that is required:

<Predictor entityId="..." sdk={sdk} language="ar" />

What the widget does for you

• Sets dir="rtl" on its own shadow-root mount point. Because that element is also the
  portal container for modals, drawers and popovers, overlays inherit direction too.
• Mirrors layout: margin/padding sides, left/right, text-align, corner-specific
  border-radius, box-shadow offsets, float, and flex/grid flow. This happens at
  style-serialization time, so nothing is required of you.
• Appends Noto Sans Arabic as a fallback to the default font stacks and loads it.
  A customFontFamily you pass still wins for the glyphs it has; the fallback only
  catches glyphs it lacks (Ubuntu and Roboto carry no Arabic).
• Forces Latin digits (1 2 3, not ١ ٢ ٣) for dates, times, scores and points, and
  raises line-height so Arabic diacritics do not clip.

What deliberately does not mirror

Some things encode physical direction rather than reading order and are left alone:
the prize wheel's rotation, the penalty-shootout goal mouth, stopwatch sweeps, SVG chart
geometry, and signed numbers (-5 stays -5, not 5-).

Props that state a physical side

A prop where you name a side is treated as physical intent, not a text-flow preference, and
is honoured as configured in every language. If you ask for the image on the left, it stays
on the left in Arabic — otherwise the prop would be lying to you.

Everything inside those containers still mirrors normally — only the container's side is
pinned.

Phone country code fallback

Components that include phone fields (lead forms) use the language code to pick a sensible default phone country if none is provided. For example, language="bg" defaults the phone country code to +359. You can override it explicitly with phoneCountryCode in LeadsOptions.

See languageToCountryCode for the full mapping.

Custom labels (per component)

A handful of components expose labels props for fine-grained text overrides — useful when you want to localize a single button or title beyond the built-in translations.

• CollectLead → LeadLabels
• Betslip → BetslipLabels

See each component page for the full label shape.