react-redux-i18n-lite
A binding library for redux to react-i18nify-lite
Usage
First install the package.
Using yarn
:
yarn add react-redux-i18n-lite
Using npm
:
npm i react-redux-i18n-lite --save
redux-thunk
is an implicit dependency, so you need it installed and included in your project.
To learn more about redux-thunk
, refer to it's GitHub page:
https://github.com/gaearon/redux-thunk
Next, load the translations to be used, for example in app.js
or in your apps entry point:
;;;; const translationsObject = en: application: title: 'Awesome app with i18n!' hello: 'Hello, %{name}!' date: long: 'MMMM Do, YYYY' export: 'Export %{count} items' export_0: 'Nothing to export' export_1: 'Export %{count} item' two_lines: 'Line 1<br />Line 2' literal_two_lines: 'Line 1\Line 2' nl: application: title: 'Toffe app met i18n!' hello: 'Hallo, %{name}!' date: long: 'D MMMM YYYY' export: 'Exporteer %{count} dingen' export_0: 'Niks te exporteren' export_1: 'Exporteer %{count} ding' two_lines: 'Regel 1<br />Regel 2' literal_two_lines: 'Regel 1\Regel 2' ; const store = ;store;store;
NB! Please note that reducer's name must be i18n
! Make sure your project's reducers don't clash with it.
Components
The easiest way to translate copies in your React components is by using the Translate
component,
directly exported from react-i18nify-lite
package:
;; const AwesomeComponent = <div> <Translate value="application.title"/> // => returns '<span>Toffe app met i18n!</span>' for locale 'nl' <Translate value="application.title" style= fontWeight: 'bold' fontSize: '14px' /> // => returns '<span style="font-weight:bold;font-size:14px;">Toffe app met i18n!</span>' for locale 'nl' <Translate value="application.hello" name="Aad"/> // => returns '<span>Hallo, Aad!</span>' for locale 'nl' <Translate value="export" count=1 /> // => returns '<span>Exporteer 1 ding</span> for locale 'nl' <Translate value="export" count=2 /> // => returns '<span>Exporteer 2 dingen</span> for locale 'nl' <Translate value="two_lines" dangerousHTML /> // => returns '<span>Regel 1<br />Regel 2</span>' </div>;
Keeping components updated
When the translation object or locale values are set, all instances of Translate
will be re-rendered to
reflect the latest state. If you choose to use I18n.t
then it is up to you to handle any state changes.
If you'd rather not re-render components after setting locale or translations object, then pass false
as a second
argument to setLocale
and/or setTranslations
method call.
Helpers
If for some reason, you cannot use the components, you can use the I18n.t
helper instead:
; I18n; // => returns 'Toffe app met i18n!' for locale 'nl'I18n; // => returns 'Hallo, Aad!' for locale 'nl'I18n; // => returns 'Niks te exporteren' for locale 'nl'I18n; // => returns 'Weird key' as translation is missingI18n; // => returns {hello: "Hallo, Aad!", title: "Toffe app met i18n!"} for locale 'nl'