yarn
yarn install glotstack
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'
const importMethod = (locale: string) => {
// Use fetch() from static directories to optimize bundle sizes; save your translations to a static path.
return fetch(`/public/translations/${locale}.json`)
}
// // OR implement inline requires for built-in translations — works without 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>
)
}
fetch()
retrieves files from static hosting like a CDN — this helps keep bundle sizes small, which is ideal for environments like Cloudflare Workers. fetch()
is generally preferred unless your environment doesn't support dynamic import syntax, in which case require()
is your fallback with a bit more boilerplate.
For smaller applications or React Native, we recommend using require()
to bundle assets directly.useGlotstack()
within 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>
)
}
en-US.json
. We recommend placing it in a location like ./translations/en-US.json
. To minimize bundle sizes, consider using public files like ./public/translations/en-US.json
..glotstack.json
in Your Projectget-translations
yarn glotstack get-translations
yarn glotstack live-translate
export GLOTSTACK_API_KEY="m65vOCKNspkd/5jYqIC7sJ9helOca39IQ1xAje0hO9GzhIg/YF139VVhZ8Zj6oZLWBQar4VoDS8fpzApW7CMGg=="
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR