Home · 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
  return fetch(`/static/translations/${locale}.json`)
}

const Application = () => {
  const locale = 'en-US' // replace with your locale source
  return (
    <GlotstackProvider initialLocale={locale} importMethod={importMethod}>
      <MyComponent />
    </GlotstackProvider>
  )
}

Using SSR?

Try dynamic imports with bundled files See more

*Not recommended for Cloudflare workers like next-on-pages due to bundle size bloat.

useGlotstack()

inside your components

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

function MyComponent() => {
  const {t} = useGlotstack()

  return <div>{t('Quickstart.hero-title')}</div>
}

Create your translation source file

You can use your native language, but defaults to

en-US.json

Beta

Don't have time to extract by hand?

Try the automated tool to generate

<sourceLocale>.json

files from your source code

glotstack extract-translations

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="7PbKN6vbzoLBNuYQqvcgksF8kcY79cP36c5JPW6hoJLdXJiQysr161NKkrK/6WSxPvHLh/42/ABoY2Ckgbb11Q==" 
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.

Learn more Back