Search code examples
typescripti18nextreact-i18next

Do i18next have keyPrefix option?


I'm using i18next and react-18next for my project. When using useTranslation from react-i18next we have a nice option of "keyPrefix" to help us reducing code duplication. But sometimes I need to use i18next outside a component, so I wonder if it has any abstractions like useTranslation that can let me use ns or keyPrefix without repeating it everytime I use the t function?

I tried looking around i18next's documentations, but I can't find anything (yet?).

I tried to do it myself with adapter pattern, but the typescript support would break since I can't get the type of the key of t function.


Solution

  • It is even easier to do so in i18next. I would just use react-i18next's documentation as an example:

    // having JSON in namespace "translation" like this:
    /*{
        "very": {
          "deeply": {
            "nested": {
              "key": "here"
            }
          }
        }
    }*/
    const { t } = useTranslation('translation', { keyPrefix: 'very.deeply.nested' });
    const text = t('key'); // "here"
    

    And in i18next (as mentioned in it's documentation):

    // for different namespaces than default one
    i18next.t('translation:very.deeply.nested.key');
    // it is recommended to use the ns option:
    i18next.t('very.deeply.nested.key', { ns: 'translation'});
    

    And if you need to set it as default in some specific JavaScript files, check: i18next.getFixedT(lng, ns, keyPrefix).

    Hope this answer helps