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 acplish what I'm trying to do or will I have to stick with prexifing every key?

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 acplish what I'm trying to do or will I have to stick with prexifing every key?

• javascript
• typescript
• internationalization
• i18next

• 1 Check this issue github./i18next/react-i18next/issues/387 . The problem might be in semicolon. Maybe you need to define some extra property for separator – captain-yossarian from Ukraine Commented Sep 2, 2021 at 12:43

3 Answers 3

Nested namespaces are not supported.

You can decorate the useTranslation hook to provide this extended functionality for pages in the namespace.

import { useTranslation as useTranslationBase } from "react-i18next";

const useTranslation = (ns, page, props={}) => {
  const trans = useTranslationBase(ns, props);

  return {
    ...trans,
    t: (keys, options) => {
      let _keys = keys;
      if (!Array.isArray(keys)) _keys = [String(keys)];
      _keys = _keys.map(key =>`${page}.${key}`)
     return trans.t(_keys, options)
    }
  }
}

Usage

export default function () {
  const { t } = useTranslation('contract', 'index');
  return <div>{t(["pageTitle"])}-{t("pageTitle")}</div>
}

The original answers are not correct, you can actually have nesting with the keyPrefix option.

In your case this should work:

const { t, i18n } = useTranslation('contract', { useSuspense: false, keyPrefix: 'index' });
...
t('pageTitle')

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!