Make react speak your language.
Overview
Instalation
npm install --save react-translate-json
# or
yarn add react-translate-json
Getting started
Just think of it in these steps:
- Define your translation directory
- Define the current user locale code, e.g.
'en'
,'de'
,'fr'
and so on. - Optionally use a fallback language code. Usually
'en'
.
Then, use the thin, built-in component, to translate your strings.
Example
The following examples are based on create-react-app
results.
// This is our json file, with translations
// This is usually our index.js;;// Import the TranslateProvider function to provide the service with your settings;; const translationOptions = pathPrefix: '/translations' // Path to your translations locale: 'en' // User current locale fallbackLocale: 'en' // Fallback locale; // That's it! You are all set! ReactDOM;
Now, you can easily add in your translations by importing the component.
// App.js;; { return <div className="App"> <header className="App-header"> <img src=logo className="App-logo" alt="logo" /> /* Render-prop based */ <TranslateComponent label="PAGES.HOME.TITLE" render= <h1 className="App-title">res</h1> /> /* Regular component usage */ <h2 className="greet"> <TranslateComponent label="HELLO" params=user: 'John'/> </h2> </header> <p className="App-intro"> To get started edit <code>src/Appjs</code> and save to reload </p> </div> ; } ;
Preact
// App.js;; { return <div className="App"> <h2 className="greet"> <TranslateComponent label="HELLO" params=user: 'John'/> </h2> </div> ; } ;