yarn
installierenyarn install glotstack
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'
const importMethod = (locale: string) => {
// Nutze fetch() aus statischen Verzeichnissen, um die Bundle-Größe zu optimieren. Deine Übersetzungen sollten in einem statischen Pfad gespeichert werden.
return fetch(`/public/translations/${locale}.json`)
}
// // ODER implementiere Inline-Requires für integrierte Übersetzungen – funktioniert ohne dynamische Imports
const translations: Record<string, () => Promise<Translations>> = {
'en-US': () => require('@/translations/en-US.json'),
'pl-PL': () => require('@/translations/pl-PL.json'),
'fr-FR': () => require('@/translations/fr-FR.json'),
};
const importMethod2 = (locale: string) => {
return translations[locale]();
}
const Application = () => {
const locale = 'en-US' // replace with your locale source
return (
<GlotstackProvider initialLocale={locale} importMethod={importMethod}>
{/*<YourComponent />*/}
</GlotstackProvider>
)
}
fetch()
lädt Dateien aus statisch gehosteten Verzeichnissen, z. B. einem CDN – das hilft, die Bundle-Größe klein zu halten, ideal für begrenzte Umgebungen wie Cloudflare Workers. fetch()
ist fast immer die bessere Wahl, es sei denn, deine Umgebung unterstützt keine dynamischen Imports – dann ist require()
die beste Lösung mit etwas mehr Boilerplate.
Für kleinere Anwendungen oder React Native empfehlen wir require()
, um die Assets in deine Bundles zu integrieren.useGlotstack()
in deinen Komponenten verwenden
import * as React from 'react'
import {useGlotstack} from 'glotstack'
function MyComponent() => {
const {t} = useGlotstack()
return (
<div>
{t('Quickstart.example', {assigns: {userName: 'JD'}})}
{/* Icon can be a function reference or a node */}
{t('Quickstart.example2', {assigns: {Icon: <Icon/>}})}
</div>
)
}
en-US.json
. Wir empfehlen, die Datei an einem Ort wie ./translations/en-US.json
abzulegen. Wenn du dir Sorgen um die Bundle-Größe machst, kannst du die Größe reduzieren, indem du öffentliche Dateien wie ./public/translations/en-US.json
verwendest..glotstack.json
in deinem Projektget-translations
ausyarn glotstack get-translations
yarn glotstack live-translate
export GLOTSTACK_API_KEY="m65vOCKNspkd/5jYqIC7sJ9helOca39IQ1xAje0hO9GzhIg/YF139VVhZ8Zj6oZLWBQar4VoDS8fpzApW7CMGg=="
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR