react-i18next-ondemand
v0.3.0
Published
Using react-i18next with async (ondemand) translations. No need to preload resource bundles.
Downloads
3
Readme
React I18next with on demand resources
Existing react-i18next does not offer a mechanism to specify async getter for translated resource keys. It supposes that the resources keys are already preloaded. This package offers an overload of the I18n
react component that will expose the t
translate method and load missings resource keys if needed using a defined translation asynchronous service that could be an AJAX call or any other async method.
The use case of dynamically loaded resource keys is needed sometimes when the translations can't be generated in a static bundle and are dependend on dynamic data (current user, other settings, database).
Installation
# using npm
$ npm install react-i18next-ondemand
# using yarn
$ yarn add react-i18next-ondemand
Who to use it?
The
I18n
react component could be used only using the render props pattern:
- Create a module to expose the service-aware component:
// i18n.ts file
import { TranslationMap, translate } from 'react-i18next-ondemand';
function translationService(keys: string[]) {
// simulate AJAX call
return new Promise<TranslationMap>((resolve) => {
const result: TranslationMap = {};
keys.map(k => { result[k] = 'translation of ' + k; });
setTimeout(() => {
resolve(result);
}, 50);
});
}
export const I18n = translate(translationService, 'thenamespace', 'en');
- Use the
Ì18n
component when you need the translation methodt
at any level of your components tree:
import * as React from 'react';
import { I18n } from './i18n';
export class Child extends React.Component {
render() {
return (
<I18n>
{
t => (
<span>
<span>child1</span>
<ul>
<li>{t('keytoTranslate1')}</li>
<li>{t('keytoTranslate2')}</li>
</ul>
</span>
)}
</I18n>
);
}
}