Adicione o provedor glotstack ao seu aplicativo React
Basta adicionar um provedor de contexto no nível superior da sua aplicação uma vez. Depois disso, as traduções serão automaticamente preenchidas conforme o locale que você fornecer.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Busque suas traduções sob demanda — a qualquer momento
yarn glotstack get-translations
Não espere mais por especialistas em idiomas. Use nosso CLI para atualizar suas traduções sempre que desejar. Usar
context
no arquivo de traduções garante que suas traduções correspondam à sua intenção. Utilize
--yaml
para arquivos YAML
sobre YAMLGlotstack oferece uma API simples baseada em hooks
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
Você pode usar a opção assigns
para substituir qualquer React.Node
em suas traduções. Utilize a notação <Component>something</Component>
inline desde que informe o nome do componente em assigns — isso é útil quando você não quer criar uma nova chave de tradução. Também pode usar {{substitution}}
para substituir o node diretamente.
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}}.