react-i18next NPM Package — Trans Component

If we want to add localization to a React app, we can use the react-i18next NPM package to do it.

In this article, we’ll look at how to use the Trans component to render our translations.

Trans Component

The Trans component lets render translations that have dynamic text.

For example, we can user it by writing:

import React from "react";
import i18n from "i18next";
import { useTranslation, initReactI18next, Trans } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        nameTitle: "mr",
        userMessagesUnread:
          "Hello <1>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>.",
        userMessagesUnread_plural:
          "Hello <1>{{name}}</1>, you have {{count}} unread messages.  <5>Go to messages</5>."
      }
    }
  },
  lng: "en",
  fallbackLng: "en",

interpolation: {
    escapeValue: false
  }
});

const count = 2;
const name = "james";

export default function App() {
  const { t } = useTranslation();

  return (
    <div className="App">
      <Trans i18nKey="userMessagesUnread" count={count}>
        Hello <strong title={t("nameTitle")}>{{ name }}</strong>, you have
        {{ count }} unread message. <a href="msgs">Go to messages</a>
      </Trans>
    </div>
  );
}

We set the i18nKey to the translation key to get the item.

count passes th count value to the item.

Also, we render the nameTitle translation inside the Trans tags.

The positions of the text will automatically be matched by react-i18next to render the translations in the right places.

We can also pass in the values we interpolate as props.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { useTranslation, initReactI18next, Trans } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        hello:
          "hello <italic>beautiful beautiful</italic> <bold>{{what}}</bold>"
      }
    }
  },
  lng: "en",
  fallbackLng: "en",

interpolation: {
    escapeValue: false
  }
});

export default function App() {
  return (
    <div className="App">
      <Trans
        i18nKey="hello"
        defaults="hello <italic>beautiful</italic> <bold>{{what}}</bold>"
        values={{ what: "world" }}
        components={{ italic: <i />, bold: <strong /> }}
      ></Trans>
    </div>
  );
}

We have the Trans component with the trannslation added to it.

The defaults prop has the default translation to render if the translation with the given i18nkey isn’t found.

values has the object with the values, we interpolate into the curly braces.

components has the components that we want to interpolate in place of the tags with the given name.

We can also use some simple elements directly in our translations.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { useTranslation, initReactI18next, Trans } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        hello: "Hello <1>{{name}}</1>."
      }
    }
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false
  }
});

const name = "james";

export default function App() {
  return (
    <div className="App">
      <Trans i18nkey="hello">
        Hello <strong>{{ name }}</strong>.
      </Trans>
    </div>
  );
}

We put the HTML strong element between the tags and it’ll be rendered.

It’ll also get the correct translation for plurals automatically:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Trans } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        newMessages: "You got one message.",
        newMessages_plural: "You got {{count}} messages."
      }
    }
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false
  }
});

const messages = ["message one", "message two"];

export default function App() {
  return (
    <div className="App">
      <Trans i18nkey="newMessages" count={messages.length}>
        You got {{ count: messages.length }} messages.
      </Trans>
    </div>
  );
}

We set the i18nkey to newMessages and set the count to the length of messages .

Then we get get the correct translation according to whether messages.length is 1 or not 1.

The _plural suffix indicates the plural version of the translation without the suffix.

Conclusion

We can use the Trans component to render HTML and plural translations.