How to translate title text of component?

Question

How can I translate the title text dynamically with i18n tools such as i18next .

Currently I am passing in the title like so:

Settings.options = {
  topBar: {
    title: {
      text: 'Settings',
    },
  },
};

Answer 1

// get t function somewhere, i.e.
const t = i18next.t:

Settings.options = {
  topBar: {
    title: {
      text: t('settings.title'),
    },
  },
};

On language change make sure this code part is executed again... so t() function can evaluate again.