🌏 react-typesafe-i18n

• 🤘 100% type-safe, infering all locales keys. [name]
• 🤩 No Provider wrapper needed, powered by preact signals;
• 🏆 Better Developer Experience (DX);
• 🗜 Small bundle;

• 🌏 react-typesafe-i18n
  • Install
  • Setup
  • Using JSON locale files

Install

npm i react-typesafe-i18n

Setup

import { createInstance } from 'react-typesafe-i18n';

// must have same structure
import en_US from './locales/en_US';
import pt_BR from './locales/pt_BR';

export const {
  t, setLanguage, language, avaliableLanguages,
} = createInstance({
  en_US,
  pt_BR,
}, 'en_US');

Your locale files:

./locales/en_US.ts:

{
  "hello": "Hi {user}",
  "greetings": {
    "morning": "Good morning {user}",
    "evening": "Good evening {user}",
    "casual": {
      "morning": "Yo, happy morning",
      "afternoon": "Yolo"
    }
  }
}

In your app:

import React from 'react';
import { t } from './i18n';

function App() {
  return (
    <div className="App">
      {t('greetings.evening', { user: 'Eduardo' })}
    </div>
  );
}

Using JSON locale files

You can use JSON files and be 100% type-safe;

// must have same structure
import en_US from './locales/en_US.json';
import pt_BR from './locales/pt_BR.json';

You just need to enable resolveJsonModule in your tsconfig.json file:

{
  ...
  "compilerOptions": {
    "resolveJsonModule": true,
  },
  ...
}