Search⌘ K

withTranslation() Higher-order Component

Explore how to implement the withTranslation() higher-order component in React applications to enable dynamic translations using react-i18next. Understand how to pass translated props, use namespaces, and switch languages for effective internationalization.

What is the withTranslation() HOC?

The withTranslation() function will create a higher-order component, which we can pass to the component that is supposed to be translated. The t and i18n props will be passed to this component. To do this, we import the function as a named export from the react-i18next package:

import { withTranslation } from 'react-i18next';

Once imported, we call the function and obtain a higher-order component. We then pass this higher-order ...