yarn
yarn install glotstack
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'
const importMethod = (locale: string) => {
// fetch() depuis des répertoires statiques pour limiter la taille des bundles ; enregistrez vos traductions dans un chemin statique.
return fetch(`/public/translations/${locale}.json`)
}
// // OU implémentez des requires inline pour les traductions intégrées — fonctionne sans support d’import dynamique
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()
récupère des fichiers hébergés statiquement n’importe où, comme un CDN — cela aide aussi à garder la taille des bundles faible, notamment sur des environnements limités comme Cloudflare Workers. fetch()
est presque toujours préférable sauf si votre environnement ne supporte pas la syntaxe d’import dynamique, auquel cas require()
est la meilleure option avec un peu plus de code.
Pour les petites applications ou react-native, nous recommandons d’utiliser require()
pour intégrer les assets dans vos bundles hébergés.useGlotstack()
dans vos composants
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
. Nous recommandons de le placer à un emplacement comme ./translations/en-US.json
. Pour réduire la taille des bundles, envisagez de scinder en fichiers publics comme ./public/translations/en-US.json
..glotstack.json
dans votre projetget-translations
yarn glotstack get-translations
yarn glotstack live-translate
.export GLOTSTACK_API_KEY="OvxngpvEeYZ21+VeIlfMO6rI92WdXUHZMRrfeDDqa0DWpHiKoqy9vjvUPFvex4Mc/r6xd6Hq04lA+5ImpHrdjQ=="
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR