Démarrage rapide avec React
Installez glotstack avec yarn
yarn install glotstack
Ajoutez le fournisseur glotstack à votre application React
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>
  )
}
Quand utiliser fetch ou import ?
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>
  )
}
Créez votre fichier source de traductions
Vous pouvez utiliser votre langue maternelle, mais Glotstack utilise par défaut 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 .
Nouveau
Vous n’aimez pas éditer du JSON ?
Essayez d’écrire votre fichier de traduction en YAML (nous le faisons !)i18n avec YAML
Obtenir les traductions
Option 1
: Créez .glotstack.json dans votre projet
Vous pouvez utiliser la clé API fournie dans la configuration. Vous pourrez réaliser 10 traductions avant de devoir vous inscrire.
Exécutez get-translations
yarn glotstack get-translations
Bientôt disponible ! Traductions en direct via yarn glotstack live-translate .
Option 2 :
Utilisez le CLI pour récupérer vos traductions
export GLOTSTACK_API_KEY="OvxngpvEeYZ21+VeIlfMO6rI92WdXUHZMRrfeDDqa0DWpHiKoqy9vjvUPFvex4Mc/r6xd6Hq04lA+5ImpHrdjQ==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
Utiliser le terminal est possible ! Mais nos options peuvent évoluer fréquemment et il serait plus simple pour nous d’ajouter un codemod pour votre configuration que de mettre à jour votre commande enregistrée.
© 2026 Glotstack.ai. Tous droits réservés.
Glotstack est un workflow de localisation pensé pour les développeurs React : gérez vos traductions en YAML/JSON, synchronisez les locales, et déployez des langues plus vite grâce à des outils assistés par IA.