i18nano v4.0.1
i18nano
Internationalization for the react is done simply.
Lightweight translation module with functionality similar to react-i18next.
Features
- Async translation loading
- Fallback translations
- Preloading translations
- Mustache-like templates
- Deep object property lookup
- And other cool stuff
Usage
Let's create typical, unopinionated and simple component with the following structure:
import { TranslationProvider, Translation } from 'i18nano';
import { load } from './load';
const translations = {
// dynamic import static json
'en': () => import('translations/en.json'),
// or with custom load function
'ru': () => load('ru')
};
export const App = () => {
return (
<TranslationProvider translations={translations}>
<header>
<Translation path="header">
Loading...
</Translation>
</header>
</TranslationProvider>
);
};
And that's all it takes! For other available provider options see definition.
Components
Translation
- recommended way to use i18nanoTranslationRender
- low level rendering component
Hooks
useTranslation
- returns the function to extract the translationuseTranslationChange
- returns the object with information and useful functions such asswitch
andpreload
languages
HOCs
withTranslation
- injects the translation functionwithTranslationChange
- injects the information and useful functions
Switch
To switch between languages, let's create a component using the hook as follows:
import { useTranslationChange } from 'i18nano';
export const LanguageChange = () => {
const translation = useTranslationChange();
return (
<select value={translation.lang} onChange={(event) => {
translation.change(event.target.value);
}}>
{translation.all.map((lang) => (
<option key={lang} value={lang}>
{lang}
</option>
))}
</select>
);
};
Concurrent features
If you use react 18 it is recommended to use transition
.
Then when you switch languages, the last downloaded translation will be displayed instead of the loader.
Split
You can use several TranslationProviders to split up translation files, for example:
import { TranslationProvider, Translation } from 'i18nano';
const translations = {
header: {
'en': () => import('translations/header/en.json')
},
main: {
'en': () => import('translations/main/en.json')
}
};
export const Header = () => {
return (
<TranslationProvider translations={translations.header}>
<header>
<Translation path="title" />
</header>
</TranslationProvider>
);
};
export const Main = () => {
return (
<TranslationProvider translations={translations.main}>
<h1>
<Translation path="title" />
</h1>
</TranslationProvider>
);
};
Installation
Recommend to use yarn for dependency management:
yarn add i18nano
License
i18nano is MIT licensed.
12 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago