react-i18n-base
Internationalise your app, extending config or factory new internationalised components.
Docs
Current core dependencies versions
- node:
^8.10.0 || ^9.10.0
- yarn (version may be check at
package.json
)
Peer dependencies
"prop-types": "^15.7.2""react": "^16.8.4""uuid": "^3.3.2"
Getting started
Internationalise your app by creating your locale file. Use the localise
function to convert your component to localised one and, then, wrap your app with the I18nProvider
.
npm install react-i18n-base
yarn add react-i18n-base
Dev code
The new version of react-i18n-base
brings a extra feature. So, localised components now will receive a component I18nTranslate
capable of translate content given path
and modifiers
. Thus, the library still retro compatible.
The difference can be seen with the following Greeting
component.
Old way to translate content
Greeting
//----------------------------------------------//// Creating LocalisedComponent//----------------------------------------------//import localise decorate from 'react-i18n-base'; const Italic = children <i>children</i>; const localeGreeting = en: greeting: 'Hi Guest!' message: pt: greeting: 'Oi Convidado!' message: ; const Greeting = i18n <div> <h2>i18ngreeting</h2> <div>i18n</div> </div>;
New way to translate content
Greeting
//----------------------------------------------//// Creating LocalisedComponent//----------------------------------------------//import localise decorate from 'react-i18n-base'; const Italic = children <i>children</i>; const localeGreeting = en: greeting: 'Hi Guest!' message: pt: greeting: 'Oi Convidado!' message: ; const Greeting = I18nTranslate <div> <h2> <I18nTranslate ="greeting" /> </h2> <div> <I18nTranslate = ="message" /> </div> </div>;
LabelForm
const localeLabel = en: title: 'Creating label' description: 'Description' color: 'Color' message: error: success: button: 'Save' pt: title: 'Criando label' description: 'Descrição' color: 'Cor' message: error: success: button: 'Gravar' ; *const LabelForm = I18nTranslate isError isSuccess <div> <h2> <I18nTranslate ="title" /> </h2> <form> <div> <I18nTranslate ="description" /> </div> <input ="text" /> <div> <I18nTranslate ="color" /> </div> <input ="text" /> isError && <div> <I18nTranslate = ="message.error" /> </div> isSuccess && <div> <I18nTranslate = ="message.success" /> </div> <button ="submit"> <I18nTranslate ="button" /> </button> </form> </div>;
App
//----------------------------------------------//// Initialising the app//----------------------------------------------//import I18nProvider from 'react-i18n-base'; const App = <div> /* If only defaultLanguage is set, then, initialLanguage will be the defaultLanguage value */ <I18nProvider ="en"> <Greeting /> /* it will get the correct i18n object */ <LabelForm /> <LabelForm /> </I18nProvider> /* // The elements below will always display in portuguese, unless // you have internal components change the provider value */ <I18nProvider ="en" ="pt"> <Greeting /> /* it will get the correct i18n object */ <LabelForm /> <LabelForm /> </I18nProvider> </div>;
^3.0.0
Features from version - Added methods to localised components
extend
andfactory
- extend: change globally the localisation json data for a specific component
- factory: creates new localised component with extension of localisation json data
Example
import localise from 'react-i18n-base'; const Greeting = name i18n <div> i18ngreeting name! </div>;const jsonData = en: greeting: 'Mr/Mrs' ;const LocalisedGreeting = Greeting;// The code below extend the localisation to all`LocalisedGreeting` instancesLocalisedGreeting; // The code below creates a new component localised based on existing one not affecting the other `LocalisedGreeting` instancesconst NewSupportLocalisedGreeting = LocalisedGreeting;
Contributions rules
- Changes must be approved;
- Changes must have tests passing on Travis-CI;
- Changes must have coverage of 95% on Travis-CI for: statements, branches, functions and lines;
- Last commit message must have attribute
[release=major|minor|patch|no-release]
;