UI Labels

ModelViewer, SimpleModelViewer, and CompareViewer accept a labels prop to override built-in text. Buttons, tooltips, accessible names, tool hints, loading/error messages, and AR placement controls all use this dictionary.

Usage

import { ModelViewer, type ModelViewerLabels } from "@liveroom-tech/react-immersive";
 
const french: ModelViewerLabels = {
  guidedTour: "Visite guidée",
  startGuidedTour: "Commencer la visite",
  stopGuidedTour: "Terminer la visite",
  previous: "Précédent",
  next: "Suivant",
  tapToPlace: "Touchez pour placer",
  download: "Télécharger",
  recordingVideo: "Enregistrement : {progress}%",
  visibleEntries: "Éléments visibles : {count}",
};
 
<ModelViewer modelUrl="/car.glb" licenseKey="your-license-key" labels={french} />;

Unspecified keys fall back to English. Empty strings are accepted. Labels are local to each viewer instance; switching dictionaries updates the UI without reloading the model. Values are plain text, not HTML or React nodes.

Placeholders and application translations

Dynamic text uses named placeholders such as {count}, {progress}, {name}, or {status}. Keep the placeholders you need in the translated string; you can reorder or repeat them. For example, objectCount: "Objets : {count}" displays Objets : 3. Placeholder values are substituted literally, and unsupported placeholders remain unchanged.

This dictionary does not format numbers or choose plural forms automatically. Your application can supply a dictionary from its own localization system. Annotation titles/descriptions, image alt text, link labels, category names, model/object metadata, custom panel content, and raw server/loader diagnostics remain application data. Automatically generated object action buttons also use the dictionary; labels on caller-supplied actions remain application data. API values such as "angle", "vertex", and environment preset IDs stay the same when their displayed labels change.

Default dictionary and types

import {
  DEFAULT_MODEL_VIEWER_LABELS,
  type ModelViewerLabels,
  type ModelViewerLabelKey,
} from "@liveroom-tech/react-immersive/utils";
 
// Also exported from the main package and /simple-model-viewer.
type Labels = Partial<Record<ModelViewerLabelKey, string>>;
const englishTour = DEFAULT_MODEL_VIEWER_LABELS.guidedTour;

Complete catalog

Only labels for enabled controls appear in a viewer. The following list is shared by both components. Placeholder names in defaults show the values supplied by the viewer.