- Notifications
You must be signed in to change notification settings - Fork0
TypeScript-based internationalization (i18n) package for the React ecosystem.
License
jereztech/i18n-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
TypeScript-based internationalization (i18n) package for the React ecosystem, including but not limited toReact,Next.js, andReact 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-react
Create ani18n.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 fieldsautodetectLanguage andinitializeWithDefault default totrue. They can be disabled by setting them toundefined in your configuration:
import{DictionaryMap,I18nConfig}from"@jereztech/i18n-react";importenfrom'./assets/dictionaries/en.json';importesfrom'./assets/dictionaries/es.json';constdictionaries:DictionaryMap={ en, es};consti18nConfig:I18nConfig={defaultLocale:'en', dictionaries,autodetectLanguage:undefined,};exportdefaulti18nConfig;
Wrap your application with theI18nProvider to provide localization context:
import{ReactNode}from'react';import{I18nProvider}from'@jereztech/i18n-react';importi18nConfigfrom'../i18n.config';exportdefaultasyncfunctionRootLayout({ children, params}:{children:ReactNode;params:{locale:string};}){const{ locale}=awaitparams;return(<htmllang={locale}><body><I18nProviderconfig={i18nConfig}>{children}</I18nProvider></body></html>);};
Access translations within your components using theuseI18n hook:
"use client";import{useI18n}from'@jereztech/i18n-react';exportdefaultfunctionHome(){const{ t}=useI18n();return<div>{t('greeting',{name:'John'},'fallbackTranslationKey')}</div>;};
This project is licensed under theGNU General Public License v3.0 - see theLICENSE file for details.
Copyright (C) 2025Jerez Tech
About
TypeScript-based internationalization (i18n) package for the React ecosystem.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.