Fügen Sie den Glotstack-Provider in Ihre React-App ein
So einfach wie einmaliges Hinzufügen eines Kontext-Providers an die oberste Stelle deiner Anwendung. Sobald du den Kontext-Provider ergänzt hast, werden die Übersetzungen automatisch geladen – abhängig von der eingestellten Sprache.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Rufen Sie Ihre Übersetzungen jederzeit bedarfsgerecht ab —
yarn glotstack get-translations
Kein Warten mehr auf Sprach-Experten. Nutze unser CLI, um deine Übersetzungen jederzeit abzurufen. Die Verwendung von
context
in deiner Übersetzungsdatei stellt sicher, dass die Übersetzungen deinem Anliegen entsprechen. Nutze
--yaml
, wenn du YAML-Dateien verwenden möchtest
über YAML.
Glotstack verwendet eine einfache hook-basierte API
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
Mit der Option assigns
kannst du jede React.Node
in deine Übersetzungen einfügen. Du kannst die <Component>something</Component>
-Notation inline verwenden, solange du den entsprechenden Komponenten-Namen in assigns übergibst – das ist nützlich, wenn du keinen neuen Übersetzungsschlüssel erstellen möchtest. Mit der {{substitution}}
-Notation kannst du direkt beliebige Nodes substituieren.
YourKey:
value: |
This is an example source text. We want to <Component>do this</Component.
We also want to demonstrate {{insertNode}} and {{mdash}}.
We can even nest other translated things {{another}}.