Dodaj dostawcę Glotstack do swojej aplikacji React
Wystarczy raz dodać provider kontekstu na najwyższym poziomie aplikacji. Po dodaniu provider automatycznie załaduje odpowiednie tłumaczenia zależnie od wybranego locale.
<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
<YourApp/>
</GlotstackProvider>
Pobieraj tłumaczenia na żądanie — w dowolnym momencie
yarn glotstack get-translations
Koniec z czekaniem na ekspertów językowych. Użyj naszego CLI, aby pobrać tłumaczenia, kiedy tylko chcesz je zaktualizować. Użycie
context
w pliku tłumaczeń gwarantuje zgodność z Twoim zamierzeniem. Skorzystaj z
--yaml
, jeśli chcesz użyć plików YAML
o YAML.
Glotstack korzysta z prostego API opartego na hookach
const { t } = useGlotstack()
<>
{t('YourKey', {
assigns: {
Component: <Component prop="f"></Component>,
insertNode: <Icon name="icon-set"/>,
mdash: <>—</>
another: <>{t('OtherKey', {locale: 'en-US'})}
},
})}
</>
Możesz użyć opcji assigns
, aby zastąpić dowolny React.Node
w tłumaczeniach. Możesz stosować notację <Component>something</Component>
inline, pod warunkiem przekazania odpowiedniej nazwy komponentu w assigns — to przydatne, gdy nie chcesz tworzyć nowego klucza tłumaczenia. Notacja {{substitution}}
pozwala bezpośrednio wstawić dowolny węzeł.
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}}.