Voeg de glotstack-provider toe aan je React-app
Zo eenvoudig als het toevoegen van een contextprovider aan het hoogste niveau van je applicatie.
Na het toevoegen worden vertalingen automatisch geladen afhankelijk van de opgegeven taal.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Haal je vertalingen op aanvraag — wanneer je maar wilt
yarn glotstack get-translations
Wacht niet op taalexperts. Gebruik onze CLI om je vertalingen op elk gewenst moment bij te werken. Gebruik
context
in je vertalingsbestand om intenties precies te definiëren. Gebruik
--yaml
als je yaml-bestanden wilt gebruiken
over yaml.
Glotstack maakt gebruik van een eenvoudige API op basis van hooks.
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
Met de assigns
-optie kun je elke React.Node
in vertalingen vervangen. Inline notatie <Component>something</Component>
is mogelijk zolang je de juiste componentnaam in assigns meegeeft. Dit is handig als je geen nieuwe vertaal sleutel wilt aanmaken. Gebruik {{substitution}}
notatie om direct een node te vervangen.
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}}.