7.0.1 • Published 6 years ago

react-translate v7.0.1

Weekly downloads
2,371
License
MIT
Repository
-
Last release
6 years ago

react-translate

Internationalization for react

Getting started

$ npm install --save react-translate
# or
$ yarn add react-trasnlate

Usage

With hooks

import { TranslatorProvider, useTranslate } from "react-translate"

let translations = {
  locale: "en",
  Home: {
    "HELLO": "Helloworld!"
  }
};

function Home() {
  let t = useTranslate("Home");
  return <h1> {t("HELLO")} </h1>
}

function App() {
  return (
    <TranslatorProvider translations={translations}>
      <Home />
    </TranslatorProvider>
  )
}

With legacy API

import { TranslatorProvider, translate } from "react-translate"

let translations = {
  locale: "en",
  Home: {
    "HELLO": "Helloworld!"
  }
};

let Home = function({t}) {
  return <h1> {t("HELLO")} </h1>
}

Home = translate("Home")(Home);

function App() {
  return (
    <TranslatorProvider translations={translations}>
      <Home />
    </TranslatorProvider>
  )
}

API

<TranslatorProvider translations={object} />

Provides the translation data for descendant components.

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

// …

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

useTranslate(namespace)

Returns a t function that returns translations under namespace.

translate(namespace)

Wraps a component and passes a t function as a prop.

Arguments

  • namespace (String)

Usage

const Header = ({ t }) => <div> {t("TITLE")} </div>;

export default translate("Header")(Header);

t(key , params)

The t function 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"]
  }
};

How do I load translations ?

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

7.0.1

6 years ago

7.0.0

6 years ago

6.1.0

6 years ago

6.0.1

7 years ago

6.0.0

8 years ago

5.0.0

9 years ago

4.0.0

9 years ago

3.0.4

10 years ago

3.0.3

10 years ago

3.0.2

10 years ago

3.0.1

10 years ago

3.0.0

10 years ago

2.0.0

10 years ago

1.2.0

10 years ago

1.1.0

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago