How to use a postProcess with i18next?

Question

From this article I read that you can add a post processing function to i18next:

i18n.addPostProcessor("myProcessorsName", function(value, key, options) 
{
   return 'some post processed data based on translated value';
});

and add it during initialization:

i18n.init({ postProcess: 'myProcessorsName' });

But I get an error addPostProcessor is not a function.

So how can I add and use a post processing function to i18next?

Answer 1

From the documentation I figured you can create a post process module and add it to the i18next instance with use().

In this example, the post process module will capitalize the first letter of any string returned:

import i18next from "i18next";
import { initReactI18next } from "react-i18next";

(...)

const CapitalizeFirstLetter = (str) => {
  return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : str
}

const initTranslations = () => {
    i18next
    .use({
      type: 'postProcessor',
      name: 'capitalize',
      process: function (value, key, options, translator) {
        return CapitalizeFirstLetter(value);
      }
    })
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
      postProcess: ["capitalize"]
    })
}