yarn
yarn install glotstack
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'
const importMethod = (locale: string) => {
// fetch() no statiskām direktorijām, lai samazinātu pakeša izmēru — tulkojumus saglabājiet statiskā ceļā
return fetch(`/public/translations/${locale}.json`)
}
// // VAI realizējiet inline requires iebūvētajiem tulkojumiem — darbojas bez dinamiskiem importiem
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()
ielādē failus no statiski izvietotām vietām, piemēram, CDN — tas palīdz saglabāt pakeša izmērus nelielus, piemēram, Cloudflare Workers vidē. fetch()
parasti ir labāks variants, ja vien jūsu vide neatbalsta dinamiskos importus; tad labāk izmantot require()
ar nedaudz vairāk koda. Mazākām lietotnēm vai react-native iesakām izmantot require()
, lai iekļautu failus pakešos.useGlotstack()
jūsu komponentēsimport * 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
. Ieteicams to saglabāt vietā kā ./translations/en-US.json
. Ja uztraucaties par pakeša izmēriem, samaziniet tos, sadalot, izmantojot publiskos failus, piemēram, ./public/translations/en-US.json
..glotstack.json
savā projektāget-translations
yarn glotstack get-translations
yarn glotstack live-translate
export GLOTSTACK_API_KEY="Drl85MXtxgWsYq0PfWiSFAeFkCJRKpfe40pPoGKcyZ0D5HwfXwsk+xFq72uCGhvEnVV1rZdBUansecB3J+r5XA=="
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR