Integrate the Glotstack provider into your React app
Simply add a context provider once at the top level of your application. After that, translations will automatically populate based on the locale you provide.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Fetch your translations on demand — anytime
yarn glotstack get-translations
No more waiting for language experts! Use our CLI to fetch your translations whenever you need updates. Using
context
in your translations ensures they align with your intent. Use
--yaml
if you'd like to work with YAML files
about yaml.
Glotstack offers a straightforward hook-based API
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
Utilize the assigns
option to substitute any React.Node
into translations. You can use <Component>something</Component>
notation inline, as long as you provide the appropriate component name in assigns — this is handy when you prefer not to create a new translation key. Use {{substitution}}
notation for direct substitutions of any node.
YourKey:
value: |
This is an example source text. We want to <Component>do this</Component.
We also want to demonstrate {{insertNode}} and {{mdash}}.
We can even nest other translated things {{another}}.