· glotstack.ai

Språk

Kom i gang med React

Installer glotstack med

yarn

yarn install glotstack

Legg til glotstack-provider i React-appen din

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

const importMethod = (locale: string) => {
  // hent() fra statiske kataloger for å begrense pakkestørrelser – oversettelsene dine må lagres på en statisk sti
  return fetch(`/public/translations/${locale}.json`)
}
// // ELLER implementer inline requires for innebygde oversettelser – fungerer uten støtte for dynamiske imports
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>
  )
}

Når bør du bruke fetch eller import?

fetch()

henter filer fra statisk hostede filer hvor som helst, som en CDN – dette hjelper også med å holde pakkestørrelser små hvis du har begrenset pakkestørrelse, som på Cloudflare Workers.

fetch()

er som regel best, med mindre miljøet ditt ikke støtter dynamisk import-syntaks; da er

require()

det beste valget, selv om det krever litt mer oppsett. For mindre applikasjoner eller react-native anbefaler vi å bruke

require()

for å bygge ressursene inn i pakkene dine.

useGlotstack()

inne i komponentene dine

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

Opprett oversettelseskildefilen din

Du kan bruke morsmålet ditt, men Glotstack bruker som standard

en-US.json

. Vi anbefaler å plassere filen i en mappe som

./translations/en-US.json

. For å redusere pakkestørrelser kan du dele opp oversettelsene ved å bruke offentlige filer som

./public/translations/en-US.json

Liker du ikke å redigere JSON?

Prøv å skrive oversettelsesfilen din i YAML (det gjør vi!) i18n med YAML

Hent oversettelser

Alternativ 1

: Opprett

.glotstack.json

i prosjektet ditt

Du kan bruke API-nøkkelen som gis i konfigurasjonen. Du kan kjøre 10 oversettelser før du må registrere deg.

Kjør

get-translations

yarn glotstack get-translations

Kommer snart! Live-oversettelser via

yarn glotstack live-translate

Alternativ 2:

Bruk CLI for å hente oversettelsene dine

export GLOTSTACK_API_KEY="qywuK+BFcdgyRlIKnjnBgTAszHkD1usb9zs+VEYSuVvBQULXNHJIWYpgGBkFWQ8G/Rn6vmx8DWMzbuFy0dI4aQ==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR

Bruk av terminal er tillatt! Men våre alternativer kan endre seg ofte, og det vil være enklere for oss å legge til en codemod for konfigurasjonen din enn å oppdatere lagrede kommandoer.

Se funksjoner Tilbake

Glotstack er en utviklerfokusert lokaliseringsarbeidsflyt for React: håndter oversettelser i YAML/JSON, hold språk synkronisert, og lanser nye språk raskere med AI-assistert verktøy.