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
- Translations in translations
- Deep translations and values lookup
- Mustache-like templates
- Nested providers
- No dependencies
- And other cool stuff

Usage

Let's create typical, unopinionated and simple component with the following structure:

``tsx
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 (





Loading...





);
};
`

And that's all it takes! For other available provider options see definition.

$3

- Translation - recommended way to use i18nano
- TranslationRender - low level rendering component

$3

- useTranslation - returns the function to extract the translation
- useTranslationChange - returns the object with information and useful functions such as switch and preload languages

$3

To switch between languages, let's create a component using the hook as follows:

`tsx
import { useTranslationChange } from 'i18nano';

export const LanguageChange = () => {
const translation = useTranslationChange();

return (
{
translation.change(event.target.value);
}}>
{translation.all.map((lang) => (

{lang}

))}

);
};
`

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:

`tsx
import { TranslationProvider, Translation } from 'i18nano';

const translations = {
common: {
'en': async () => ({
license: 'MIT'
})
},
header: {
'en': async () => ({
title: 'Header'
})
},
main: {
'en': async () => ({
title: 'Main'
})
}
};

export const Header = () => {
return (
language="en"
translations={translations.header}
>






);
};

export const Main = () => {
return (
language="en"
translations={translations.main}
>

);
};

/**
* MIT
*

Header

* MIT
*

Main

* MIT
*/
export const App = () => {
return (
language="en"
translations={translations.common}
>






);
};
`

Installation

Recommend to use yarn for dependency management:

`shell
yarn add i18nano
``

License

i18nano is MIT licensed.