React-i18next: How to make the lang and dir attributes of the html tag reflect the current language?

[MohammedAl-Mahdawi]

Hi,

Thank you for this amazing framework,

I use create react app to create my project and I want the lang and dir attributes of the html tag to reflect the current language?

How to do that please?

All the best,
Mohammed

[MohammedAl-Mahdawi]

I used React Helmet and put the following in the App.js file and it worked:

<Helmet htmlAttributes={{ lang : this.props.i18n.language, dir: this.props.i18n.dir() }}/>

Is this ok or is there an i18next way to do this?

[jamuhl]

That's ok...or use i18next.on('languageChanged', (lng) => {document.documentElement.setAttribute('lang', lng);})

[MohammedAl-Mahdawi]

@jamuhl Thanks a lot!

[yairEO]

If the user is not allowed to change the language but it derives by other means, then I simply add this line of code to my i18next configuration file:

// my configuration
i18n
  .use(initReactI18next) 
  .init({
    resources: {
      ...
    },
    ...
  })

document.documentElement.lang = i18n.language  // <---- this line right here

If the user is allowed to change the language then this line above should be placed where the language is changed