i18next/react-i18next

This system is a React library that provides internationalization capabilities through components, hooks, and utilities for managing translations. It supports complex formatting via ICU MessageFormat and offers extensive TypeScript type safety for translation keys and namespaces. The project also includes a comprehensive suite of example applications demonstrating integration with various build tools, testing frameworks, and backend services.

13 changes.

This period focused on expanding internationalization capabilities by introducing the IcuTrans component and TypeScript definitions for ICU MessageFormat support. Concurrently, the project modernized its example applications by migrating them from Create React App to Vite and adding new examples for SSR, Storybook, and Jest testing.

10 changes.

This period focused on enhancing type safety and developer onboarding by adding comprehensive TypeScript examples for simple and multi-namespace i18n setups using Vite. It also involved expanding test coverage with rigorous type tests for custom configurations and updating Jest mocks to ensure accurate rendering behavior for the Trans component.

14 changes.

This period focused on upgrading React Native example applications to the modern New Architecture and toolchains, including migration to Fabric and ReactHost. Concurrently, extensive TypeScript type tests were added to validate the selector API, custom resource declarations, and core component definitions, ensuring robust type inference and compile-time safety.

The library now exports \IcuTrans\ and \IcuTransWithoutContext\ components, providing a dedicated way to render ICU MessageFormat translations with full TypeScript support. These components accept an \i18nKey\, a \defaultTranslation\ string, and a \content\ declaration tree describing the React components to be rendered in place of numbered tags (e.g., \\<0\>\). This complements the existing \Trans\ component and the \icu.macro\ by offering a programmatic API for ICU formatting that integrates with the library's type system and context providers.

(repo-wide) · high confidence

The test-jest example now includes a complete set of source files and Jest tests demonstrating how to test React components using react-i18next. It covers various translation patterns including the useTranslation hook, withTranslation HOC, Translation component, and Trans component, along with examples of mocking the i18next backend for isolated unit tests.

example/test-jest/src · high confidence

A new example application located at example/test-jest demonstrates how to set up Jest testing for a React app using react-i18next and Vite. This example includes configuration files for Jest (jest.config.js) and Babel (babel.config.js), along with test utilities such as a file mock for CSS/SVG imports and a setup file for registering testing-library matchers. It also provides sample tests using @testing-library/react and includes localized content for English, German, and Swedish to illustrate internationalization testing scenarios.

example/test-jest · high confidence

The example/razzle-ssr/src directory now contains a complete React application demonstrating server-side rendering with i18next. This includes the main App and Home components using react-i18next hooks, client and server entry points for hydration and rendering, and an i18n configuration file that sets up the http-backend and language detection.

example/razzle-ssr/src · high confidence

A new example application has been added to the \example/react-component-lib\ directory, showcasing how to integrate \react-i18next\ with \i18next\ in a React project using Vite. The example includes configuration for language detection and HTTP backend loading, demonstrates usage of the \useTranslation\ hook and \Trans\ component, and illustrates how to share a single \i18n\ instance across multiple component libraries using \I18nextProvider\.

example/react-component-lib · high confidence

A new Storybook example has been added to the \example/storybook\ directory, demonstrating how to integrate \react-i18next\ with Storybook. This example includes a Storybook toolbar that allows users to switch the application locale between English, German, and Arabic, and provides stories for components using hooks, Higher-Order Components, and the \Trans\ component.

example/storybook · high confidence

A new example application has been added to demonstrate integration with locize. The project is built with Vite and React, featuring a configuration that loads translations via i18next-locize-backend, tracks key usage with locize-lastused, and enables in-context editing via the locize editor plugin. The example includes a UI with language switching and links to a step-by-step tutorial and video guides.

example/locize · high confidence

A new example application has been added to the repository, demonstrating a React setup using TypeScript and Vite. The example includes the main application component (\App.tsx\) which utilizes \react-i18next\ for internationalization, including pluralization support via the \Trans\ component, along with standard entry point (\main.tsx\), styling (\index.css\), and Vite environment type definitions (\vite-env.d.ts\).

example/react-typescript/simple/src · high confidence

A new example application has been added at example/react-typescript/simple-multi-namespaces/src, demonstrating how to use the library with React and TypeScript. The entry point (main.tsx) renders the App component within React.StrictMode, which in turn displays three distinct components (Comp1, Comp2, Comp3) to illustrate multi-namespace usage. The example includes standard Vite configuration files (vite-env.d.ts) and basic styling (index.css).

example/react-typescript/simple-multi-namespaces/src · high confidence

The example project now includes three new React components (Comp1, Comp2, Comp3) demonstrating how to use react-i18next with TypeScript. Comp1 uses the default namespace, Comp2 switches to a specific namespace ('ns2'), and Comp3 demonstrates accessing multiple namespaces ('ns1', 'ns2') simultaneously within a single component.

example/react-typescript/simple-multi-namespaces/src/components · high confidence

The React TypeScript example now includes a dedicated i18n setup using i18next and react-i18next. A new configuration file initializes the library with English resources, and a corresponding translation JSON file provides sample content, including interpolated strings and pluralization rules for user messages.

example/react-typescript/simple/src/i18n · high confidence

The example application now includes a dedicated i18n configuration file (\config.ts\) that initializes \i18next\ with \react-i18next\, defining \ns1\ as the default namespace and loading resources for both \ns1\ and \ns2\. Corresponding JSON resource files (\ns1.json\ and \ns2.json\) have been added to the \en\ directory, providing the translation strings used in this TypeScript-specific demonstration of multi-namespace handling.

example/react-typescript/simple-multi-namespaces/src/i18n · high confidence

This change introduces TypeScript declaration files to the example project to enable type-safe translations. A new \resources.ts\ file exports the imported translation namespaces (\ns1\ and \ns2\) as a const object, and \i18next.d.ts\ augments the i18next module to use these resources and the default namespace, ensuring that translation keys are validated against the available JSON files.

example/react-typescript/simple-multi-namespaces/src/@types, example/react-typescript/simple/src/@types · high confidence

The library now includes an \IcuTrans\ component (and its context-free counterpart \IcuTransWithoutContext\) that renders translations using ICU MessageFormat syntax with numbered tags (e.g., \\<0\>Click here\</0\>\). This new capability allows developers to define React component declarations via a \content\ prop, which are automatically mapped to the numbered placeholders in the translation string. The implementation includes a dedicated utility suite (\IcuTransUtils\) for tokenizing the translation strings, decoding HTML entities, and reconstructing the React element tree, while also exporting dummy functions (\date\, \time\, \number\, etc.) to support the \icu.macro\ preprocessor.

src · high confidence

Added a new server-side rendering (SSR) example application located in the \example/razzle-ssr\ directory. This example demonstrates an SSR setup using Vite and Express, featuring internationalization (i18n) via \i18next\ and \i18next-http-middleware\. It includes server-side language detection, passes initial translation stores to the client to prevent flickering, and supports the \saveMissing\ feature for dynamic translation management. The entry point files include \server.js\, \vite.config.js\, \index.html\, and associated source files.

example/razzle-ssr · high confidence

A new React example has been added to the \example/react\ directory, providing a complete starter project for integrating react-i18next. The application is built with Vite (replacing older toolchains like Create React App) and demonstrates key i18next features, including the use of the \i18next-http-backend\ for loading translations, \i18next-browser-languagedetector\ for automatic language detection, and React patterns such as the \useTranslation\ hook, \withTranslation\ HOC, and \Suspense\ for loading states. It includes configuration files for Vite, a \.gitignore\, and source files (\App.jsx\, \i18n.js\, \main.jsx\) that showcase these integrations.

example/react · high confidence

Added two new starter projects to the React TypeScript example directory: a 'simple' example demonstrating fully type-safe translation calls using generated resource types, and a 'simple-multi-namespaces' example. Both are built with Vite and include Swedish (sv) locale support, providing users with ready-to-run templates for integrating react-i18next with TypeScript.

example/react-typescript · high confidence

Added a new example application in \example/devserver-save-missing\ that showcases how to automatically capture and save missing i18next translation keys during development. The app configures the browser-side i18next with \saveMissing: true\ to POST missing keys to the Vite dev server, which uses a custom plugin and \i18next-http-middleware\ to write these keys into \.missing.json\ files in the \public/locales\ directory.

example/devserver-save-missing · high confidence

The react-fluent example application has been updated to use Vite as its build tool, replacing the previous Create React App setup. This change introduces a new project structure including a Vite configuration file and an HTML entry point, while preserving the existing internationalization features powered by react-i18next and i18next-fluent.

example/react-fluent · high confidence

A pre-commit hook has been added to the .husky directory that runs \npm exec lint-staged\ before each commit, ensuring that staged files are linted automatically.

.husky · high confidence

The react-icu example application has been migrated from the legacy Create React App toolchain to Vite, enabling faster development and builds. This update introduces support for ICU message formatting via the react-i18next babel macro plugin, allowing developers to use advanced pluralization, select, and formatting syntax directly in JSX components. Additionally, a new Russian (ru) translation locale has been added to the application's internationalization resources.

example/react-icu · high confidence

The React Native Locize example project has been regenerated to use the current React Native CLI and build system. This upgrade replaces the legacy Gradle wrapper with version 9.3.1, migrates the JavaScript configuration to the modern \@react-native\ presets (Babel, Metro, ESLint, Jest, and TypeScript), and updates the iOS native project to use the new \RCTReactNativeFactory\ architecture in \AppDelegate.swift\. The app now includes a \PrivacyInfo.xcprivacy\ manifest for iOS App Store compliance and demonstrates the latest \react-i18next\ integration patterns.

example/ReactNativeLocizeProject · high confidence

The React Native example project has been updated to use the current React Native CLI toolchain, replacing legacy build systems with modern standards. This includes migrating the Android implementation to Kotlin and enabling the New Architecture (Fabric) by default via \DefaultReactActivityDelegate\. The iOS side now uses the new \RCTReactNativeFactory\-based AppDelegate, and the JavaScript layer has been upgraded to TypeScript with a new \App.tsx\ entry point. Additionally, the example now integrates \react-i18next\ for internationalization, allowing users to switch between English and German, and enforces code quality via standardized ESLint and Prettier configurations.

example/ReactNativeProject, example/ReactNativeProject/android · high confidence

The react-localstorage example has been rebuilt using Vite instead of the previous toolchain. Users can now start the development server with \npm run dev\ (serving at localhost:5173), build the production bundle, or preview the output. The application demonstrates i18next with a chained backend (LocalStorage and Http) and includes language switching between English and German via buttons, supporting both React hooks and higher-order components.

example/react-localstorage · high confidence

The Android example project has been updated to use the modern React Native toolchain, including the New Architecture (Fabric). This involves adding missing core configuration files such as the AndroidManifest, MainActivity (Kotlin), and resource definitions (styles, strings, drawables). The app now utilizes DefaultReactActivityDelegate to enable Fabric and applies a specific edit-text drawable fix to prevent NullPointerExceptions, ensuring the example runs correctly on current React Native versions.

example/ReactNativeLocizeProject/android · medium confidence

The Jest mock for react-i18next in the test-jest example has been updated to correctly render the Trans component when it receives no children by falling back to the i18nKey prop. This ensures that tests using the Trans component without explicit child elements will now render the key string instead of potentially failing or rendering incorrectly, aligning the mock's behavior more closely with the library's runtime logic.

example/test-jest/src/\\mocks\\_ · high confidence_

The React Native example projects have been updated to align with the new React Native architecture. The Android entry points now utilize the \ReactHost\ interface and the \DefaultReactHost\ factory, replacing the previous application initialization pattern. This ensures the examples remain compatible with modern React Native tooling and the new architecture.

app · high confidence

Added TypeScript tests for strict selector mode; Added TypeScript tests for useTranslation selector types with defaultNS: false; Added TypeScript type tests for core components and hooks; Added TypeScript type tests for custom types configuration; Added TypeScript type tests for i18next components and hooks; Added TypeScript type tests for selector-based custom types; Added TypeScript type-checking tests for custom resource declarations; Added snapshot tests for ICU macro transformations; Added tests for IcuTrans component and translation utilities; Comprehensive test suite for Trans, useTranslation, and I18nextProvider.

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 62 → 61 (-0.6)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 61 → 64 (+3.1)
• Architecture 99 → 99 (+0.2)
• Maturity 58 → 60 (+1.3)
• Readiness 58 → 56 (-1.9)
• Security 78 → 79 (+1.6)
• Performance 70 (new)

• Documentation: no installation or build instructions (README.md)
• Documentation: no usage examples (README.md)
• Off-boarding risk: anonymized user #1

• Duplicated block (21 lines × 2) (example/ReactNativeLocizeProject/ios/ReactNativeLocizeProject/AppDelegate.swift)
• Duplicated block (7 lines × 2) (example/ReactNativeLocizeProject/ios/ReactNativeLocizeProject/AppDelegate.swift)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• Hotspot: src/useTranslation.js (src/useTranslation.js)
• Off-boarding risk: anonymized user #1

• 2 commits — 1 feature/other, 1 fixes

• (root) — 2 commits

• fix: fix(Trans): preserve single-element children in empty slots
• change: 17.0.15

• Unchanged — 0 containers · 1 contexts · 0 edges

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

i18next/react-i18next was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.