· glotstack.ai

Lingua

Inizia con React

Installa glotstack con

yarn

yarn install glotstack

Aggiungi il provider glotstack alla tua applicazione React

import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // fetch() da directory statiche per limitare le dimensioni del bundle: salva le traduzioni in un percorso statico
  return fetch(`/public/translations/${locale}.json`)
}
// // Oppure implementa require inline per traduzioni integrate — funziona senza supporto per import dinamici
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>
  )
}

Quando usare fetch o import?

fetch()

preleva file da directory statiche ospitate ovunque, come CDN – aiuta a mantenere piccoli i bundle, utile con limiti come Cloudflare Workers.

fetch()

è quasi sempre la scelta migliore, a meno che l'ambiente non supporti import dinamici: in tal caso

require()

è la soluzione più semplice, con un po' di boilerplate in più. Per app piccole o react-native, consigliamo

require()

per includere asset nei bundle ospitati.

useGlotstack()

all'interno dei tuoi componenti

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>
  )
}

Crea il tuo file sorgente per le traduzioni

Puoi usare la tua lingua madre, ma Glotstack utilizza

en-US.json

come predefinito. Ti consigliamo di salvarlo in un percorso come

./translations/en-US.json

. Se sei preoccupato per le dimensioni del bundle, puoi ridurle dividendo usando file pubblici come

./public/translations/en-US.json

Novità

Non ti piace modificare JSON?

Prova a scrivere il file di traduzione in YAML (noi lo facciamo!)i18n con YAML

Ottieni traduzioni

Opzione 1

: Crea

.glotstack.json

nel tuo progetto

Puoi usare la chiave API fornita nel config. Potrai eseguire 10 traduzioni prima di dover effettuare la registrazione.

Esegui

get-translations

yarn glotstack get-translations

Presto disponibile! Traduzioni live tramite

yarn glotstack live-translate

Opzione 2:

Usa il CLI per scaricare le traduzioni

export GLOTSTACK_API_KEY="6TOybhR44g7j6nrtJ/blfJ1tPnilfv1oPzBArqT1lfFcHYvF/7+nvkJihHvpD3mBo4g5bleP/iCSAbbZoDt+vA==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR

È consentito usare il terminale! Ma le nostre opzioni cambiano frequentemente e sarebbe più semplice per noi aggiungere un codemod alla tua configurazione piuttosto che aggiornare i comandi salvati.

Scopri di più Indietro

Glotstack è un workflow di localizzazione pensato per sviluppatori React: gestisci traduzioni in YAML/JSON, sincronizza le lingue e distribuisci nuove lingue più velocemente con strumenti assistiti dall'AI.