Pierwsze kroki z React
Zainstaluj glotstack za pomocą yarn
yarn install glotstack
Dodaj dostawcę Glotstack do swojej aplikacji React
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // fetch() z katalogów statycznych, aby ograniczyć rozmiary paczek; tłumaczenia należy zapisać na ścieżce statycznej
  return fetch(`/public/translations/${locale}.json`)
}
// // LUB zaimplementuj inline requires dla wbudowanych tłumaczeń – działa bez wsparcia dynamicznego importu
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>
  )
}
Kiedy używać fetch lub import?
fetch() pobiera pliki z hostowanych statycznie lokalizacji, np. CDN — pomaga to utrzymać małe rozmiary paczek, co jest ważne np. na Cloudflare Workers. fetch() jest zwykle najlepszym wyborem, chyba że środowisko nie obsługuje dynamicznego importu; wtedy require() jest wygodniejszy, choć wymaga trochę więcej kodu. Dla mniejszych aplikacji lub react-native rekomendujemy require() , aby zbudować zasoby bezpośrednio w paczkach.
useGlotstack() wewnątrz Twoich komponentów
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>
  )
}
Utwórz plik źródłowy dla tłumaczeń
Możesz użyć swojego języka ojczystego, jednak Glotstack domyślnie korzysta z en-US.json . Zalecamy umieszczenie pliku w lokalizacji takiej jak ./translations/en-US.json . Jeśli martwisz się o rozmiary paczek, podziel je, korzystając z publicznych plików jak ./public/translations/en-US.json .
Nowość
Nie lubisz edytować JSON?
Spróbuj pisać pliki tłumaczeń w YAML (my tak robimy!)i18n z YAML
Pobierz tłumaczenia
Opcja 1
: Utwórz .glotstack.json w swoim projekcie
Możesz użyć klucza API podanego w konfiguracji. Masz prawo do 10 tłumaczeń zanim będziesz musiał się zarejestrować.
Uruchom get-translations
yarn glotstack get-translations
Wkrótce! Tłumaczenia na żywo przez yarn glotstack live-translate
Opcja 2:
Użyj CLI do pobrania tłumaczeń
export GLOTSTACK_API_KEY="BUGDsObi4HU2HY6wDWjxon8qHfzShhEbCE7QOE56utyOKr0/kd7vSYTMw3FkjGoeotiZqvLTzyoBdmFiVD74ug==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
Możesz korzystać z terminala! Jednak nasze opcje mogą się często zmieniać, więc łatwiej będzie nam dodać codemod do Twojej konfiguracji niż aktualizować zapisane polecenia.
© 2026 Glotstack.ai. Wszelkie prawa zastrzeżone.
Glotstack to workflow lokalizacji dla React zaprojektowany dla programistów: zarządzaj tłumaczeniami w YAML/JSON, synchronizuj locale i szybciej wprowadzaj nowe języki dzięki narzędziom wspieranym przez AI.