· glotstack.ai

Taal

Aan de slag met React

Installeer glotstack met

yarn

yarn install glotstack

Voeg de glotstack-provider toe aan je React-app

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

const importMethod = (locale: string) => {
  // Gebruik fetch() vanuit statische mappen om de bundelgroottes te beperken; sla je vertalingen op in een statisch pad.
  return fetch(`/public/translations/${locale}.json`)
}
// // OF implementeer inline requires voor ingebouwde vertalingen – werkt zonder ondersteuning voor dynamische 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>
  )
}

Wanneer gebruik je fetch of import?

fetch()

haalt bestanden op van statisch gehoste locaties zoals een CDN – dit helpt de bundelgroottes klein te houden, bijvoorbeeld bij Cloudflare Workers.

fetch()

is meestal beter, tenzij je omgeving geen dynamische import ondersteunt; dan is

require()

een goede alternatief met wat extra boilerplate. Voor kleinere apps of react-native raden we aan

require()

te gebruiken om assets in je bundles mee te nemen.

useGlotstack()

in je componenten

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

Creëer je vertaalbronbestand

Je kunt je moedertaal gebruiken, maar Glotstack gebruikt standaard

en-US.json

. We raden aan om een locatie zoals

./translations/en-US.json

te gebruiken. Maak je je zorgen over de bundelgroottes? Verlaag deze door gebruik te maken van publieke bestanden zoals

./public/translations/en-US.json

Nieuw

Geen fan van JSON bewerken?

Probeer je vertalingen in YAML te schrijven (dat doen wij ook!).i18n met YAML

Vertalingen ophalen

Optie 1

: Maak

.glotstack.json

aan in je project

Je kunt de API-sleutel uit de config gebruiken. Je kunt 10 vertalingen uitvoeren voordat je je moet aanmelden.

Voer

get-translations

uit

yarn glotstack get-translations

Binnenkort! Live vertalingen via

yarn glotstack live-translate

Optie 2:

Gebruik de CLI om je vertalingen op te halen

export GLOTSTACK_API_KEY="Drl85MXtxgWsYq0PfWiSFAeFkCJRKpfe40pPoGKcyZ0D5HwfXwsk+xFq72uCGhvEnVV1rZdBUansecB3J+r5XA==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR

Het gebruik van de terminal is toegestaan! Maar onze opties kunnen vaak veranderen; het is makkelijker voor ons om een codemod voor je configuratie toe te voegen dan je opgeslagen commando bij te werken.

Ontdek onze functies Terug

Glotstack is een ontwikkelaarsgerichte lokaliseringsworkflow voor React: Beheer vertalingen in YAML/JSON, houd talen synchroon en lanceer nieuwe talen sneller met AI-ondersteunde tools.