How to apply a formatter in nested translations with i18next

Question

I would like to format nested translations with i18next

Given the resources:

{
  translation: {
    en: {
      food: 'bread',
      food_is_good: "$t(food), that's not bad",
    },
  },
}

and a formatting function:

function format(value, format, lng) {
  if (value == undefined) return value;
  switch (format) {
    case 'capitalize':
      return _.capitalize(value);
    default:
      return value;
  }
}

that is used in the initialization of i18next:

...
  interpolation: { format: format },
...

I would like the output to be "Bread, that is not bad". So I hoped that something like:

{
  ...
  "food_is_good_1" : "$t(food,capitalize), that's not bad",
  "food_is_good_2" : "{{$t(food),capitalize}}, that's not bad",
  "food_is_good_3" : "{{food,capitalize}}, that's not bad",
  ...
}

would do the trick. The first option displays errors : "failed parsing options string in nesting" The last two options warn: missed to pass in variable food,capitalize for interpolating {{food,capitalize}}

Answer 1

Your first option works in the latest i18next (v19).

https://codesandbox.io/s/react-i18next-forked-g1d47?file=/src/i18n.js