I18N modules
Isolated I18N modules for your components. Like CSS modules but for i18n ;)
npm install --save i18n-modules
Benefits
- No more large files with translations for the whole website.
- No more global scope.
- No more broken texts.
Getting Started
Client
The steps below use webpack to organize building process. You are free to use anything else.
Step 1:
First of all you should set available locales with the global variable LANGS
and a locale for the current bundle with BUNDLE_LANG
:
plugins: LANGS: JSON BUNDLE_LANG: JSON
Step 2:
Set an ignore pattern for unnecessary languages in the current bundle:
plugins: `^\.\/(?!$)` /i18n$/ LANGS: JSON BUNDLE_LANG: JSON
Step 3:
Create a folder with translations for your component:
// src/components/MyComponent/i18n/en.js moduleexports = 'hello_world': 'Hello, world!';
// src/components/MyComponent/i18n/ru.js moduleexports = 'hello_world': 'Привет, мир!';
// src/components/MyComponent/i18n/index.js// Include translations moduleexports = ;
Step 4:
Use translations from your component:
// src/components/MyComponent/index.js const t = ; { return <h1></h1> }
Node
If you want to use i18n modules with node.js, for example, to render react components, you should set a locale for the request before call translation functions.
I18N;resstatus200;
If your project renders client code, don't set BUNDLE_LANG
and include all translations into the server bundle.
plugins: LANGS: JSON
Examples
See example
folder. Clone repo and run npm i && npm start
.
Other
Supports interpolation, pluralization. Has Polyglot.js under the hood.