· glotstack.ai

Jezik

Brzi početak sa React-om

Instalirajte glotstack putem

yarn

yarn install glotstack

Dodajte glotstack provider u vašu React aplikaciju

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

const importMethod = (locale: string) => {
  // fetch() iz statičkih direktorijuma da biste smanjili veličinu bundla; prevode treba sačuvati na statičkoj putanji
  return fetch(`/public/translations/${locale}.json`)
}
// // ILI implementirajte inline requires za ugrađene prevode -- radi bez podrške za dinamički import
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>
  )
}

Kada koristiti fetch ili import?

fetch()

preuzima fajlove sa statički hostovanih lokacija poput CDN-a - ovo pomaže da veličina bundla ostane mala, što je važno za ograničene veličine bundla, kao na Cloudflare Workers.

fetch()

je gotovo uvek bolji izbor, osim ako vaše okruženje ne podržava dinamički import, tada je

require()

najbolja opcija, iako zahteva malo više koda. Za manje aplikacije ili react-native, preporučujemo korišćenje

require()

za ubacivanje resursa u hostovane bundle-ove.

useGlotstack()

unutar vaših komponenti

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

Kreirajte svoj izvorni fajl za prevode

Možete koristiti svoj maternji jezik, ali Glotstack podrazumevano koristi

en-US.json

. Preporučujemo da ga smestite na lokaciju poput

./translations/en-US.json

. Ako vas brine veličina bundla, podelite prevode koristeći javne fajlove kao što su

./public/translations/en-US.json

Novo

Ne volite uređivanje JSON-a?

Probajte da pišete fajlove za prevod u YAML formatu (mi to koristimo!)i18n sa YAML-u

Preuzmite prevode

Opcija 1

: Kreirajte

.glotstack.json

u svom projektu

Možete koristiti API ključ iz konfiguracije. Moći ćete da pokrenete 10 prevoda pre nego što se registrujete.

Pokrenite

get-translations

yarn glotstack get-translations

Uskoro! Prevod uživo preko

yarn glotstack live-translate

Opcija 2:

Koristite CLI za preuzimanje prevoda

export GLOTSTACK_API_KEY="OvxngpvEeYZ21+VeIlfMO6rI92WdXUHZMRrfeDDqa0DWpHiKoqy9vjvUPFvex4Mc/r6xd6Hq04lA+5ImpHrdjQ==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR

Korišćenje terminala je dozvoljeno! Ali naše opcije se često menjaju, pa je lakše da dodamo kodmod za vašu konfiguraciju nego da ažuriramo sačuvane komande.

Pogledajte funkcionalnosti Nazad

Glotstack je workflow za lokalizaciju prilagođen programerima za React: upravljajte prevodima u YAML/JSON, sinhronizujte lokalizacije i brže isporučujte nove jezike uz pomoć AI alata.