Walk a developer through localizing a React UI Bundle: detect hardcoded user-facing strings, extract them into Salesforce Custom Labels, wire up i18next over the Platform SDK GraphQL backend, and verify labels render across locales.
This file is the
workflow + guardrail spine
. Depth lives in linked docs:
references/i18n-setup.md
the two files you write: the i18next init and the label manifest
references/label-xml.md
Custom Labels and translation metadata XML shapes; the
namespace:Key
rules
references/interpolation.md
positional
{0}/{1}
placeholder interpolation in labels
references/verifying.md
serve URL, locale flip, and verifying labels render
references/gotchas.md
the three silent-fail traps: unregistered manifest keys, API-version bake-in, stale label cache
The one-paragraph mental model
A React UI Bundle can't use
@salesforce/label/*
the way LWC does, those imports resolve at compile time inside the platform's compiler, which your standalone React bundle doesn't go through. Instead, your app
fetches labels at runtime
through the Salesforce GraphQL UI API and hands them to
i18next
(a standard React i18n library) to render. The Platform SDK provides the runtime plumbing for this, a detector that reads the user's language, a backend that fetches labels over GraphQL, and a context fetch. You write two thin files: a short init that wires the SDK pieces into i18next, and a manifest listing which labels your app uses. The rest is authoring the labels themselves as Salesforce Custom Labels metadata.
import
{
useTranslation
}
from
"react-i18next"
;
Show more
Installs
907
Repository
forcedotcom/sf-skills
GitHub Stars
849
First Seen
14 days ago
Security Audits
Gen Agent Trust Hub
Pass
Socket
Pass
Snyk
Pass