Ajoutez le fournisseur glotstack à votre application React
Aussi simple que d’ajouter un fournisseur de contexte au niveau supérieur de votre application une fois. Une fois le fournisseur ajouté, les traductions seront automatiquement mises à jour selon la locale que vous fournissez.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Récupérez vos traductions à la demande — à tout moment
yarn glotstack get-translations
Plus besoin d’attendre la disponibilité d’experts linguistiques. Utilisez notre CLI pour récupérer vos traductions dès que vous souhaitez les mettre à jour. L’utilisation de
context
dans vos fichiers de traduction garantit que vos traductions correspondent à votre intention. Utilisez
--yaml
si vous souhaitez utiliser des fichiers YAML
à propos du YAML.
Glotstack propose une API simple basée sur des hooks.
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
Utilisez l’option assigns
pour insérer n’importe quel React.Node
dans vos traductions. La notation <Component>something</Component>
est utilisable en ligne, tant que vous passez le nom du composant dans assigns — pratique pour éviter de créer une nouvelle clé de traduction. La notation {{substitution}}
permet d’insérer directement un nœud.
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}}.