react utilities for simple i18n
npm install react-translate> Internationalization for react
``console`
$ npm install --save react-translateor
$ yarn add react-trasnlate
`javascript
import { TranslatorProvider, useTranslate } from "react-translate"
let translations = {
locale: "en",
Home: {
"HELLO": "Helloworld!"
}
};
function Home() {
let t = useTranslate("Home");
return
function App() {
return (
)
}
`
`javascript
import { TranslatorProvider, translate } from "react-translate"
let translations = {
locale: "en",
Home: {
"HELLO": "Helloworld!"
}
};
let Home = function({t}) {
return
Home = translate("Home")(Home);
function App() {
return (
)
}
`
Provides the translation data for descendant components.
`javascript
import { render } from "react-dom";
import { TranslatorProvider } from "react-translate";
// …
render(
mountNode
);
`
Returns a t function that returns translations under namespace.
Wraps a component and passes a t function as a prop.
#### Arguments
- namespace (_String_)
#### Usage
`javascript
const Header = ({ t }) => {t("TITLE")} ;
export default translate("Header")(Header);
`
The t function is the one that returns your translations given the key, and optionally some parameters.
`javascriptt
// 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 choose between singular`
// and plural
t("KEY", { n: 2 });
objectTranslations should be grouped by component:
`jslocale
const translations = {
// the 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"]
}
};
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