react-translate v7.0.1
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.
6 years ago
6 years ago
6 years ago
7 years ago
8 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago