yarn
でglotstackをインストールyarn install glotstack
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'
const importMethod = (locale: string) => {
// バンドルサイズを抑えるために静的ディレクトリからfetch()を使用し、翻訳ファイルを静的パスに保存してください。
return fetch(`/public/translations/${locale}.json`)
}
// // またはインラインrequireで組み込み翻訳を実装 — 動的インポート非対応環境で有効
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()
はCDNなどの静的ホスティングからファイルを取得し、バンドルサイズを小さく保つことができます。Cloudflare Workersなどの小さなバンドル制限環境に最適です。動的インポート非対応環境では、require()
が適しています。
小規模アプリやReact Nativeでは、require()
を使ってアセットをバンドルに組み込むことを推奨します。useGlotstack()
をコンポーネント内で使用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
を使用します。./translations/en-US.json
のような場所に保存することを推奨します。バンドルサイズが気になる場合は、./public/translations/en-US.json
のようなパブリックファイルに分割することで、サイズを減らすことができます。.glotstack.json
を作成get-translations
を実行yarn glotstack get-translations
yarn glotstack live-translate
でライブ翻訳を取得export GLOTSTACK_API_KEY="OvxngpvEeYZ21+VeIlfMO6rI92WdXUHZMRrfeDDqa0DWpHiKoqy9vjvUPFvex4Mc/r6xd6Hq04lA+5ImpHrdjQ=="
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR