TypeScript-based internationalization (i18n) package for the React ecosystem, including but not limited to React, Next.js, and React Native.
- Auto-detection: Automatically detects user's language preferences.
- Namespace Support: Organize your translations using namespaces.
- Lightweight: Minimal overhead with efficient performance.
- Fallback Message: Fall back to default message if TranslationKey is not resolved.
Install the package via npm:
npm install @jereztech/i18n-reactCreate an i18n.config.ts file at the root of your project. See /examples/i18n.config.ts for reference.
| Field | Type | Default | Description |
|---|---|---|---|
defaultLocale |
string |
'en' |
The default locale to use when no user preference is detected or for fallback translations. |
dictionaries |
Map |
{} |
A Map of translation dictionaries for supported locales. |
autodetectLanguage |
boolean |
true |
Automatically detect the user's language preferences. |
initializeWithDefault |
boolean |
true |
Initialize with the default locale if autodetection is disabled or fails. |
Note: The fields autodetectLanguage and initializeWithDefault default to true. They can be disabled by setting them to undefined in your configuration:
import { DictionaryMap, I18nConfig } from "@jereztech/i18n-react";
import en from './assets/dictionaries/en.json';
import es from './assets/dictionaries/es.json';
const dictionaries: DictionaryMap = { en, es };
const i18nConfig: I18nConfig = {
defaultLocale: 'en',
dictionaries,
autodetectLanguage: undefined,
};
export default i18nConfig;Wrap your application with the I18nProvider to provide localization context:
import { ReactNode } from 'react';
import { I18nProvider } from '@jereztech/i18n-react';
import i18nConfig from '../i18n.config';
export default async function RootLayout(
{ children, params }: { children: ReactNode; params: { locale: string };}
) {
const { locale } = await params;
return (
<html lang={locale}>
<body>
<I18nProvider config={i18nConfig}>
{children}
</I18nProvider>
</body>
</html>
);
};Access translations within your components using the useI18n hook:
"use client";
import { useI18n } from '@jereztech/i18n-react';
export default function Home() {
const { t } = useI18n();
return <div>{t('greeting', { name: 'John' }, 'fallbackTranslationKey')}</div>;
};This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.
Copyright (C) 2025 Jerez Tech