Issue
My application is rather large, so to have a more organized translation file I want to use nested namespaces. Example:
{
"contract": {
"index": {
"pageTitle": "Contract"
}
}
The problem with this is when I'm accessing it. With the help of this question I found out I can access the keys inside index by using it as below:
const { t, i18n } = useTranslation('contract', { useSuspense: false });
...
t('index.pageTitle')
The problem is It seems rather unecessary to prefix index.
to every key I want to access. What I would like to do is import the namespace index instead of contract, and use it as below:
const { t, i18n } = useTranslation('contract:index', { useSuspense: false });
...
t('pageTitle')
Which doesn't work. I tried contract.index
as well. In the official documentation I found nothing about nesting. Is it possible to accomplish what I'm trying to do or will I have to stick with prexifing every key?
Solution
After some good time, I found something that resembles nested namespacing in i18n. Apparently, you can get a new translation object from a translation hook, as such:
const { t } = useTranslation('batch');
const nestedNamespace = t('id.someOtherSection', { returnObjects: true })
And, to access properties of nestedNamespace
, you can call it directly, as such:
nestedNamespace.someTranslation -> THIS WORKS!!!
nestedNamespace('someTranslation') -> THIS WON'T WORK!
Answered By - Pelicer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.