https://github.com/mucsi96/simple-i18n

Created with CodeSandbox
https://github.com/mucsi96/simple-i18n

Last synced: about 1 month ago
JSON representation

Created with CodeSandbox

• Host: GitHub
• URL: https://github.com/mucsi96/simple-i18n
• Owner: mucsi96
• Created: 2020-06-06T16:42:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-11T20:02:25.000Z (over 3 years ago)
• Last Synced: 2023-04-06T22:37:45.275Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://codesandbox.io/s/github/mucsi96/react-simple-i18n-poc
• Size: 1.33 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# simple-i18n

Minimalistic translation handling utility

## Features

- translation of keys

- parameter interpolation

- translation function available in any JavaScript context or function

- type safety for translation keys which can prevent typos

- very small size (618 bytes)

## FAQ

### Why not store selected language and bundles in Redux or React state?

Normally users are not changing language so frequently. Normally it happens once during initial application setup.

So there is not much sense of optimizing the user experience around language change use case.

Designing the application for language change use case by putting the selected language in React state or Redux makes a lot of complexity for basically no gain.

It makes the translation handling tightly coupled to React / Redux which offten results in unnecessary complex components.

### Why reload the page on a language change?

As users change the language very rarely we can make the application simpler instead of optimizing for language change use case. With page reload we don't need to think what we have to refetch for newly selected language. We don't even need to listen for language change event. Also we can use the selected language and translate function in any javascript function without the need to inject React / Redux state.

### Why call it a function "t"?

Normally the translation function is the most frequently used function in an application. It has to be used any time we want to display a text on the screen. So choosing a very short name can reduce the noise in a source code. So developers can focus more on message keys instead of function name. One of the most popular internationalization-framework called i18next is also using "t" function for translation function.

### Why not to use some popular package for translation handling

This utility is only 618 bytes and covers the needed use cases. In contrast [`i18next`](https://www.i18next.com/) is 40.1KB, [`react-intl`](https://formatjs.io/docs/react-intl/) is 29.4KB.

## Usage

```typescript

import { setLanguage } from "./utils";

setLanguage("fr"); // -> sets language to 'fr' in local variable

```

```typescript

import { getLanguage } from "./utils";

getLanguage(); // -> 'fr'

```

```typescript

import { translate } from "./utils";

const bundles = { fr: { Greeting: "Bonjour" } };

translate(bundles, "Greeting"); // -> 'Bonjour'

```

```typescript

import en from "./messages_en.json"; // <- { "Greeting": "Hello {name}!" }

import fr from "./messages_fr.json"; // <- { "Greeting": "Bonjour {name}!" }

import { translate } from "./utils";

type Id = keyof typeof en;

export const t = (id: Id, params: Record = {}) =>

  translate({ en, fr }, id, params);

t("Greeting", { name: "Alex" }); // -> 'Bonjour Alex!'

t("Greetink", { name: "Alex" }); // -> 'Argument of type '"Greetink"' is not assignable to parameter of type '"Greeting"'.'

```