react utilities for simple i18n


Internationalization for react

Build Status


$ npm install --save react-translate


// at the top of your app
import { TranslatorProvider } from "react-translate"
// when you require a translator
importtranslate } from "react-translate"


<TranslatorProvider translations={object} />

A component that provides the translation data to the translate() calls in the component hierarchy below. You can't use translate() without wrapping the a component (e.g., the root component) in .

import { render } from "react-dom"
import { TranslatorProvider } from "react-translate"


  <TranslatorProvider translations={object}>
    <App />

translate(displayName[, shouldComponentUpdate])

Connects a component to the translations provided by <TranslatorProvider>. It passes a t function to your component's props. It returns a new, connected component class (i.e., it does not modify the component class passed to it).


  • displayName (String) Name of the component in the translations. It is required because we cannot rely on the with minified code.
  • shouldComponentUpdate optional, (Function) Custom shouldComponentUpdate for the component.


const Header = ({ t }) => (

export default translate("Header")(Header)

t(key [, params])

The t function passed a prop is the one that returns your translations given the key, and optionally some parameters.

// for a simple key
t("KEY") // "value"
// for a key with a parameter
t("KEY", { foo: "bar" }) // replaces "{{foo}}" in the translation with "bar"
// for a key with a numeral parameter, which makes `t` choose between singular
// and plural
t("KEY", { n: 2 })

Organizing the translations object

Translations should be grouped by component:

const translations = {
  // the `locale` parameter is mandatory, it enables react-translate to use
  // the right rules for singular and plural
  locale: "fr",
  ComponentName: {
    SIMPLE_KEY: "Helloworld",
    KEY_WITH_PARAMS: "Hello {{name}}",
      "You have {{n}} message",
      "You have {{n}} messages",

How do I load translations ?

React Translate does not give you a specific way to load translations, its goal is only to provide a way to pass translations down to your app components'.

You can use a simple XHR call, put translations in a <script> in your HTML page, or any other way you find adequate.

Usage example

You can check the example repository