Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eolme/i18nano
Lightweight translation module with functionality similar to react-i18next
https://github.com/eolme/i18nano
i18n i18next internationalization l10n localization react reactjs translation
Last synced: 2 months ago
JSON representation
Lightweight translation module with functionality similar to react-i18next
- Host: GitHub
- URL: https://github.com/eolme/i18nano
- Owner: eolme
- License: mit
- Created: 2022-03-23T19:27:34.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-02T15:55:35.000Z (over 1 year ago)
- Last Synced: 2024-09-16T10:47:32.777Z (4 months ago)
- Topics: i18n, i18next, internationalization, l10n, localization, react, reactjs, translation
- Language: TypeScript
- Homepage: https://npm.im/i18nano
- Size: 79.1 KB
- Stars: 37
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# i18nano [](https://github.com/eolme/i18nano/blob/master/LICENSE) [](https://phobia.vercel.app/p/i18nano) [](https://phobia.vercel.app/p/i18nano) [](https://github.com/eolme/i18nano/blob/master/tests)
> 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](https://mustache.github.io/)-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](./src/types.ts#L25-L35).
### Components
- `Translation` - recommended way to use i18nano
- `TranslationRender` - low level rendering component
### Hooks
- `useTranslation` - returns the function to extract the translation
- `useTranslationChange` - returns the object with information and useful functions such as `switch` and `preload` languages
### Switch
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 (
);
};
export const Main = () => {
return (
);
};
/**
* MIT
* Header
* MIT
* Main
* MIT
*/
export const App = () => {
return (
);
};
```
## Installation
Recommend to use [yarn](https://yarnpkg.com/getting-started/install) for dependency management:
```shell
yarn add i18nano
```
## License
i18nano is [MIT licensed](./LICENSE).