· glotstack.ai

Language

Getting started with React

Install glotstack with

yarn

yarn install glotstack

Add the glotstack provider to your React app

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

const importMethod = (locale: string) => {
  // fetch() from static directories to limit bundle sizes you will need to save your translations to a static path
  return fetch(`/public/translations/${locale}.json`)
}
// // OR implement inline requires for built-in translations -- works with no dynamic import support
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>
  )
}

When to use fetch or import?

fetch()

pulls files from staticly hosted files that you host anywhere like a CDN - this also helps keep bundle sizes small if you have a limited bundle size, like on Cloudflare Workers.

fetch()

is almost always better unless your environment cannot support dynamic import syntax, then the

require()

method is your best bet for a little more boilerplate. For smaller applications or react-native, we recommend you use

require()

to build the assets into your hosted bundles.

useGlotstack()

inside your components

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

Create your translation source file

You can use your native language, but Glotstack defaults to

en-US.json

. We recommend putting in a location like

./translations/en-US.json

. If you are worried about bundle sizes an reduce bundle sizes by splitting using public files like

./public/translations/en-US.json

New

Don't like editing JSON?

Try writing your translation file in YAML (we do!) i18n with YAML

Get translations

Option 1

: Create

.glotstack.json

in your project

You can use the API key provided in the config. You will be able run 10 translations before you'll have to sign up.

Run

get-translations

yarn glotstack get-translations

Coming soon! Live translations via

yarn glotstack live-translate

Option 2:

Use CLI to fetch your translations

export GLOTSTACK_API_KEY="MbXsfV7sa5A8l9ENWWHkPqd1lRSmAegpPjAW8kpPaMjIcvePe3vlBE7O/VQokoA1UDZl3dA/gg7ytpHneB6uNA==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR

Using terminal is allowed! But our options may change often and it would be easier for us to add a codemod for your config than it would be to update your saved command.

Features Back

Glotstack is a developer-first localization workflow for React: manage translations in YAML/JSON, keep locales in sync, and ship new languages faster with AI-assisted tooling