react-translate
Internationalization for react
Getting started
$ npm install --save react-translate# or$ yarn add react-trasnlate
Usage
With hooks
let translations = locale: "en" Home: "HELLO": "Helloworld!" ; { let t = ; return <h1> </h1>} { return <TranslatorProvider translations=translations> <Home /> </TranslatorProvider> }
With legacy API
let translations = locale: "en" Home: "HELLO": "Helloworld!" ; let { return <h1> </h1>} Home = Home; { return <TranslatorProvider translations=translations> <Home /> </TranslatorProvider> }
API
<TranslatorProvider translations={object} />
Provides the translation data for descendant components.
;; // … ;
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 = <div> </div>; "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; // "value"// for a key with a parameter; // replaces "{{foo}}" in the translation with "bar"// for a key with a numeral parameter, which makes `t` choose between singular// and plural;
translations
object
Organizing the 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.