React-translate-extended NPM

react-translate

Internationalization for react

Info

This project is a fork of bloodyowl's react-translate repository. Its goal is to add features extending the capabilities of react-translate. Currently the features added are:

Referencing Translation
Expose Child Component

Install

$ npm install --save react-translate

Import

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

API

`<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"

// …

render(
  <TranslatorProvider translations={object}>
    <App />
  </TranslatorProvider>,
  mountNode
)

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).

Arguments

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

Usage

// with a React class, using it as a decorator
@translate("Header")
class Header extends Component {
  render() {
    const { t } = this.props
    return (
      <div>
        {t("TITLE")}
      </div>
    )
  }
}

// with a stateless component function
const Header = ({ t }) => (
  <div>
    {t("TITLE")}
  </div>
)

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}}",
    KEY_WITH_PLURAL: [
      "You have {{n}} message",
      "You have {{n}} messages",
    ],
  },
}

Creating a reference in the `translations` object

To create a reference in the translations object that returns another translation's value, simply include @: and the translation key to be referenced:

const translations = {
  locale: "es",
  FirstComponent: {
    FIRST_KEY: "Hola Mundo!"
  },
  SecondComponent: {
    SECOND_KEY: "@:FirstComponent.FIRST_KEY"
  }
}

Hence t('SECOND_KEY)', when used in SecondComponent, will return "Hola Mundo!"

Access Original Component

When using the translate decorator, the Comoponent will be wrapped with . To obtain the original Component use the following:

component.ChildComponent

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.