Skip to content
react utilities for simple i18n
JavaScript
Branch: master
Clone or download
bloodyowl Merge pull request #23 from 814k31/patch-1
Add repo link to npm publication
Latest commit 018752f Jul 29, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Document new version Mar 22, 2019
scripts/jest
src useCallback -> useMemo Mar 21, 2019
.babelrc 4.0.0 Sep 15, 2016
.gitignore use babel for build, added possibility to change language Oct 28, 2015
.nvmrc update node Sep 15, 2016
.travis.yml Fix version on ci May 23, 2019
HISTORY.md Document new version Mar 22, 2019
LICENSE
README.md Corrected package spelling Jun 4, 2019
package.json Add repo link to npm publication Jul 26, 2019
yarn.lock Update May 23, 2019

README.md

react-translate

Internationalization for react

Getting started

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

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.

You can’t perform that action at this time.