Skip to content

🤩 A fully type-safe and lightweight React internationalization library for all your TS and JS projects.

Notifications You must be signed in to change notification settings

eduardoborges/react-typesafe-i18n

Repository files navigation

🌏 react-typesafe-i18n

NPM JavaScript Style Guide BundleSize Types Install Size

ezgif com-video-to-gif

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

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,
  },
  ...
}

About

🤩 A fully type-safe and lightweight React internationalization library for all your TS and JS projects.

Topics

Resources

Stars

Watchers

Forks