Primeros pasos con React
Instala Glotstack con yarn
yarn install glotstack
Agrega el proveedor de glotstack a tu aplicación React.
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // fetch() desde directorios estáticos para limitar el tamaño del paquete; guarda tus traducciones en una ruta estática
  return fetch(`/public/translations/${locale}.json`)
}
// // O implementa requires en línea para traducciones integradas — funciona sin soporte para importaciones dinámicas
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>
  )
}
¿Cuándo usar fetch o import?
fetch() obtiene archivos desde ubicaciones estáticas que alojas, como un CDN — esto ayuda a mantener el tamaño del paquete pequeño si tienes un límite, como en Cloudflare Workers. fetch() casi siempre es mejor, a menos que tu entorno no soporte importación dinámica, en cuyo caso require() es tu mejor opción, aunque requiere más configuración. Para aplicaciones pequeñas o react-native, recomendamos usar require() para incluir los recursos en tus paquetes alojados.
useGlotstack() dentro de tus componentes
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 tu archivo fuente de traducción
Puedes usar tu idioma nativo, pero Glotstack usa en-US.json por defecto. Recomendamos guardarlo en ./translations/en-US.json . Si te preocupa el tamaño del paquete, considera dividir archivos públicos como ./public/translations/en-US.json .
Nuevo
¿No te gusta editar JSON?
Prueba a escribir tu archivo de traducciones en YAML (¡nosotros lo hacemos!)i18n con YAML
Obtener traducciones
Opción 1
: Crea .glotstack.json en tu proyecto
Puedes usar la clave API proporcionada en la configuración. Podrás realizar 10 traducciones antes de que debas registrarte.
Ejecuta get-translations
yarn glotstack get-translations
¡Próximamente! Traducciones en vivo a través de yarn glotstack live-translate
Opción 2:
Usa la CLI para obtener tus traducciones
export GLOTSTACK_API_KEY="m65vOCKNspkd/5jYqIC7sJ9helOca39IQ1xAje0hO9GzhIg/YF139VVhZ8Zj6oZLWBQar4VoDS8fpzApW7CMGg==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
¡Puedes usar la terminal! Pero nuestras opciones pueden cambiar frecuentemente y sería más fácil añadir un codemod para tu configuración que actualizar tu comando guardado.
© 2026 Glotstack.ai. Todos los derechos reservados.
Glotstack es un flujo de trabajo de localización para React diseñado para desarrolladores: gestiona traducciones en YAML/JSON, mantiene locales sincronizados y lanza nuevos idiomas más rápido con herramientas asistidas por IA.