react-easy-i18n
Installation
npm install --save react-easy-i18nUsage
Creating new language bundle
You can create a language bundle by using the registerLang function from the package. You first pass in the language abbreviation, then you pass the translation object :
import {Â registerLang } from 'react-easy-i18n';
registerLang('en', {
home: 'Home',
user: 'User'
});Nesting language bundles
You can nest language bundle into sub object for easier listing.
import {Â registerLang } from 'react-easy-i18n';
registerLang('en', {
home: 'Home',
user: {
firstname: 'Firstname',
config: {
language: 'Language'
}
}
});And then pass in a slug splitted by dot to your <Text/> component like :
<Text text="user.config.language"/> // Would output "Language"Switching locales
You can switch locale with the setCurrentLocale function. Make sure you already registered the language or it'll fallback to english
import {Â registerLang, setCurrentLocale } from 'react-easy-i18n';
registerLang('en', {
home: 'Home',
user: 'User'
});
setCurrentLocale('en');Usage in React
A component Text is included with the package which handles formatting and translations. You must at least provide the text prop which is the key of your translation.
import React from 'react';
import { Text } from 'react-easy-i18n';
const SuperReactCompoenent = () => {
return (
<div>
<Text text="welcome" />
</div>
);
};The Text component will render your translation of "welcome" inside spans.
You can also provide 2 other props : params and formatters
Advanced usage
Parameters
You may require to parameterize string instead of concatenate them. You can do so by providing your parameter key with a colon (:) inside you string. For instance, I want to say Hi to my users.
import React from 'react';
import {Â registerLang, Text } from 'react-easy-i18n';
registerLang('en', {
welcome: 'Hi :fullname'
});
const SuperReactCompoenent = () => {
const fullname = 'John Doe';
const params = {
fullname
};
return (
<div>
<Text text="welcome" params={params}/>
</div>
);
};The rendered text will be Hi John Doe.
Formatters
You may want to format text sometimes. It helps you keep your translation base clean and reusable because you will be formatting it on runtime.
First, you must register your formatter with the registerFormatters helper. It simply takes and object in parameter with the function you use as formatters
import {Â registerFormatters } from 'react-easy-i18n';
registerFormatters({
uppercase: text => text.toUpperCase(),
exclamation: text => text + '!',
});And then you pass a string with all the formatters you want splitted by pipes
import React from 'react';
import {Â Text, registerFormatters } from 'react-easy-i18n';
registerLang('en', {
welcome: 'Hi :fullname'
});
registerFormatters({
uppercase: text => text.toUpperCase(),
exclamation: text => text + '!',
});
const SuperReactCompoenent = () => {
return (
<div>
<Text text="welcome" formatters="uppercase|exclamation"/>
</div>
);
};With parameters
It would render HI JOHN DOE!. It may end up with the need to parameterize these formatters. Stay safe, we did it for you. You can, after you formatter key, add a colon (:) and pass in parameters splitted by commas
I want a formatter to surround a text with things. Sometimes it'll be parentheses, sometimes brackets.
import React from 'react';
import {Â registerFormatters, registerLang, Text } from 'react-easy-i18n';
registerLang('en', {
home: 'Home'
});
registerFormatters({
// args is the array of things after the colon
surround: (text, args) => args[0] + text + args[1]
});
const SuperReactCompoenent = () => {
return (
<div>
<Text text="welcome" formatters="surround:(,)"/>
<Text text="welcome" formatters="surround:[,]"/>
</div>
);
};The first component will render (Home) and the second will render [Home]
