react-i18next documentation
🏠 i18next🌐 localization as a service🎓 i18next crash course💾 GitHub Repository
  • Introduction
  • Getting started
  • Guides
    • Drawbacks of other i18n solutions
    • Quick start
    • Multiple Translation Files
    • Extracting translations
  • latest
    • Step by step guide
    • i18next instance
    • useTranslation (hook)
    • withTranslation (HOC)
    • Translation (render prop)
    • Trans Component
    • I18nextProvider
    • SSR (additional components)
    • Migrating v9 to v10
    • TypeScript
  • Misc
    • Using with ICU format
    • Using with fluent format
    • Testing
  • legacy v9
    • Step by step guide (v9)
    • Overview (v9)
    • i18next instance (v9)
    • I18nextProvider (v9)
    • withI18n (v9)
    • withNamespaces (v9)
    • NamespacesConsumer (v9)
    • Trans Component (v9)
    • Interpolate (v9)
    • SSR (v9)
  • 🌐localization as a service
  • 🎓i18next crash course
  • 💾GitHub Repository
Powered by GitBook
On this page
  1. legacy v9

withI18n (v9)

Last updated 6 years ago

Was introduced in v8.0.0. Not available in older versions.

withI18n is a basic higher order component which passes mainly the t function down to the wrapped component.

import React, { Component } from "react";
import { withI18n } from "react-i18next";

class MyComponent extends Component {
  render() {
    const { t } = this.props;

    return <h2>{t('Welcome to React')}</h2>;
  }
}
export default withI18n()(MyComponent);

This component won't trigger a rerender on language change. The passed down t function will be the same as calling i18n.t directly and not be bound to a specific namespace or even trigger a load of a namespace.

If you do not pass in translations on i18n.init we highly encourage using the hoc.

withNamespaces