Skip to the content.

How to provide t function to a class component

Please note: This document is deprecated. Use it only if you have a good reason to do so.

Explanation: Since React 16.8 you don’t need to create class components at all, but use hooks in functional components instead. Check out our main i18n documentation.

How to enable translations in a React class component?

1. Wrap your component in withTranslation function.

import React, { Component } from 'react';

/**
 * Use this one if you want to import the component to Angular
 */
import { withTranslation } from '@/modules/core/client/utils/i18n-angular-load';

/**
 * Use this one for every other case
 */
// import { withTranslation } from 'react-i18next';
// import '@/config/client/i18n'; // sometimes you'll also need to import i18n config

export class MyComponent extends Component { // export the unwrapped component if you want to test it
  render() {
    return (
      <div>I am a React component!</div>
    );
  }
}

export default withTranslation('myNamespace')(MyComponent); // wrap the component and export it (default export)

2. Add a t function to your props (withTranslation wrapper provided it)

// ...
import PropTypes from 'prop-types';

export class MyComponent extends Component { // export the unwrapped component if you want to test it

  constructor(props) {
    super(props);
  }

  render() {
    const { t } = this.props;
    return (
      <div>I am a React component!</div>
    );
  }
}

MyComponent.propTypes = {
  t: PropTypes.func.isRequired,
  // specify your other props here
}

// ...

3. Follow the main documentation from step 2.