Agrega el proveedor de glotstack a tu aplicación React.
Es tan fácil como añadir un proveedor de contexto en el nivel superior de tu aplicación una vez. Una vez agregado, las traducciones se cargarán automáticamente según el locale que proporciones.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Obtén tus traducciones bajo demanda — en cualquier momento.
yarn glotstack get-translations
Ya no tendrás que esperar a que los expertos en idiomas estén disponibles. Usa nuestra CLI para obtener tus traducciones cuando desees actualizarlas. Usar
context
en tu archivo de traducciones garantiza que coincidan con tu intención. Usa
--yaml
si prefieres archivos YAML
sobre YAML.
Glotstack utiliza una API simple basada en hooks
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
Puedes usar la opción assigns
para sustituir cualquier React.Node
en las traducciones. Usa la notación <Component>something</Component>
en línea siempre que pases el nombre correcto del componente en assigns — esto es útil si no quieres crear una nueva clave. También puedes usar {{substitution}}
para sustituir directamente cualquier 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}}.