Add the glotstack provider to your React app
As easy as adding a context provider to the top-level of your application once.
Once you add the context provider the translations will be automatically populated
for your application depending on the locale you supply.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Fetch your translations on demand — anytime
yarn glotstack get-translations
No more waiting for language experts to become available. Use our CLI to
fetch your translations anytime you want to update them. Using
context
in your translations file ensures that your translations match your intent. Use
--yaml
if you
want to use yaml files
about yaml
Glotstack uses a simple 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'})}
},
})}
</>
You can use the assigns
option to substitute any React.Node
into any translations. You can use <Component>something</Component>
notation inline as long
as you pass the appropriate component name in assigns — this is useful when you
do not want to make a new translation key. You can use {{substitution}}
notation
to directly substitute 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}}.