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

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

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

// …

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

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

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

// 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 });

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