CODEWITHSUNDEEP
javascriptreactjsi18nextreact-helmet
Charles Brown
Charles Brown

Reputation: 927

Can I use react-i18next trans tag inside React helmet tag?

The following code 

const x = (<Trans>Welcome</Trans>);
<helmet><title>{ `${x}` }</title></helmet>

does not show title = Welcome. It shows title = object,object

Hence, I wonder can I use react-i18next tag inside react-helmet tag?

Upvotes: 0

Views: 1148

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281606

You can't have custom JSX tags within Helmet. It only supports all valid head tags: title, base, meta, link, script, noscript, and style tags and their attributes. However you can use the t function from i18n for translation

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent () {
  const { t, i18n } = useTranslation();
  return <helmet><title>{t('Welcome to React')}</title></helmet>
}

or with HOC like

// the hoc
import { withTranslation } from 'react-i18next';

function MyComponent ({ t }) {
  return <helmet><title>{t('Welcome to React')}</title></helmet>
}

export default withTranslation()(MyComponent);

Documentation of react-18n provides more details

Upvotes: 2

Related Questions