There are two namespaces I am working with:
- The first namespace is global and contains business-related glossary terms
- The second namespace is specific to a certain page
// Global Namespace
{
"amendment": "amendment"
}
// Page Namespace
{
"action": "Enter your $t(global:amendment) below."
}
In my React component scenario:
import React from 'react'
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const { t, i18n } = useTranslation();
return (
<div>
<h1>{t('amendment')}</h1>
<p>{t('action')}</p>
</div>
)
}
I would like to change the text inside my h1 element to uppercase.
What would be the most effective way to achieve this?
One solution I thought of is using context, like so:
// Global Namespace
{
"amendment": "amendment",
"amendment_uppercase": "Amendment"
}
import React from 'react'
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const { t, i18n } = useTranslation();
return (
<div>
<h1>{t('amendment', {context: 'uppercase'})}</h1>
<p>{t('action')}</p>
</div>
)
}
The downside here is that it requires duplicating all my translation keys, especially since I have a large global glossary.