Aggiungi il provider glotstack alla tua applicazione React
Basta aggiungere un context provider al livello più alto dell'applicazione una sola volta. Dopo averlo aggiunto, le traduzioni si popoleranno automaticamente in base alla lingua fornita.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Recupera le tue traduzioni on-demand — in qualsiasi momento
yarn glotstack get-translations
Non aspettare più che gli esperti di lingua siano disponibili. Usa il nostro CLI per scaricare le traduzioni ogni volta che vuoi aggiornarle. Usare
context
nel file di traduzione garantisce coerenza con l'intento. Usa
--yaml
se desideri utilizzare file YAML
su YAML.
Glotstack offre una semplice API basata su hook
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
Puoi usare l'opzione assigns
per sostituire qualsiasi React.Node
nelle traduzioni. Utilizza la notazione <Component>something</Component>
inline e assicurati di passare il nome del componente in assigns — utile quando non desideri creare una nuova chiave di traduzione. Puoi anche utilizzare {{substitution}}
per sostituire direttamente un nodo.
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}}.