i18next-react and custom format

user_1256697 0
Viewed 2242

I do use i18next-react and try to work with formating. So I've setup in my init formating like that:

i18n.use(initReactI18next).init(
  {
    ...
    interpolation: {
      escapeValue: false,
      // eslint-disable-next-line no-unused-vars
      format: function (value, format, lng) {
        if (format === 'uppercase') return value.toUpperCase();
        if (format === 'lowercase') return value.toLowerCase();
        if (format === 'capitalize') return `${value.substr(0, 1).toUpperCase()}${value.substr(1)}`;
        return value;
      },
    },
    ...
  },

If I do in my react-component this:

import i18next from 'i18next';
i18next.format('edit', 'capitalize'),

It works like expected... the word edit becomes capital lettered.

BUT, how do I use it with my own translation: t('edit') I wonder if there is a way to call the formating with react-i18next instead of i18next package

If I try with: t('{{edit, capitalize}}'),, I got this error: enter image description here

What I try is at least to decide in my t()-MEthod to use a given format on this string.

react-i18next reactjs
2 Answers

Ok, I've found TWO solution for that.

TLDR; The 2nd one, might be the better one!

1st Solution

Language-File

In my common.js I've added some kind of Meta-Formater string like this:

{
  "uppercase": "{{value, uppercase}}",
  "capitalize": "{{value, capitalize}}",
  "lowercase": "{{value, lowercase}}",
}

i18n.js config

My custom formats in the config looks like this:

i18n.use(initReactI18next).init(
  {
    ...
    interpolation: {
      escapeValue: false,
      // eslint-disable-next-line no-unused-vars
      format: function (value, format, lng) {
        if (format === 'uppercase') return value.toUpperCase();
        if (format === 'lowercase') return value.toLowerCase();
        if (format === 'capitalize') return `${value.substr(0, 1).toUpperCase()}${value.substr(1)}`;
        return value;
      },
    },
    ...
  },

How to use

In my component I use it like that:

t('common:capitalize', { value: t('common:edit') })

What it does: I use the key I've declared in the common.js to format any value which are pasted into it as parameter value.

In my component I do paste the still translated value of common:edit. For DE it's bearbeiten, and this will be capitalized by the common:capitalize now.

2nd Solution (better one?!?)

You don't need to define such "Meta-Formater" in your common.js, but only the i18n.js config described in previous topic.

Then in your component you need to additional import i18next and use it like this:

i18next.format(t('common:settings'), 'capitalize'),

This Solution is the cleaner one in my opinion, but has the only downside, that you have to add an additional import: enter image description here

user_12566970

you should define a custom function; let changeCase be that function

const changeCase = (str, isLower = false) =>
  isLower ? str.toLowerCase() : str.toUpperCase() // you can extend this function to suit your needs

in your translation you can do this:

changeCase(t('edit')) // here it will uppercase the whole string
changeCase(t('edit'), true) // will lowercase the whole string
user_73856340
Related