Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trans only interpolates defaultVariables if values or components is present #1685

Closed
hubgit opened this issue Oct 13, 2023 · 2 comments
Closed

Comments

@hubgit
Copy link

hubgit commented Oct 13, 2023

🐛 Bug Report

I was surprised to find that the Trans component does not interpolate values from defaultVariables when only the translation key is provided.

To Reproduce

https://codesandbox.io/p/sandbox/i18-next-trans-default-variables-tq3xmv

import i18n from 'i18next'
import { initReactI18next, Trans } from 'react-i18next'

i18n.use(initReactI18next).init({
  lng: 'en',
  interpolation: {
    defaultVariables: {
      name: 'Bob',
    },
  },
  resources: {
    en: {
      translation: {
        test: 'My name is {{name}}.',
      },
    },
  },
})

export const App = () => (
  <div className="App">
    <div>
      <Trans i18nKey="test" />
    </div>
    <div>
      <Trans i18nKey="test" components={{}} />
    </div>
    <div>
      <Trans i18nKey="test" values={{}} />
    </div>
  </div>
)
image

Expected behavior

<Trans i18nKey="test" /> should interpolate default variables into the translation template with key test.

Your Environment

@hubgit
Copy link
Author

hubgit commented Oct 13, 2023

The workaround is to use t('test') instead of <Trans i18nKey="test"/>.

@adrai
Copy link
Member

adrai commented Oct 13, 2023

That's a new feature... coming with v13.3.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants