Simplifying Localization in React: An Inside Look at `translation-service-react`

Source: Dev.to

Managing internationalization (i18n) and localization in modern frontend applications can often be a complex undertaking. For developers working within the React ecosystem, the translation-service-react library offers a structured, reactive, and highly dynamic approach to handling multilingual content.

Created by Arpad K. (@arpad1337) and released under the MIT License in 2025, this lightweight tool provides an elegant out‑of‑the‑box solution for React translation pipelines.

Overview

translation-service-react implements a TranslationService class using the Singleton pattern, ensuring a single, globally consistent language state throughout the application. Reactive state management is powered by RxJS, which broadcasts language changes via a ReplaySubject (buffer size 1). Components can subscribe to getCurrentLanguage() as an Observable and instantly react to language toggles.

Language Detection & Persistence

When the service initializes, it follows a smart detection sequence:

1. Local Storage Check – Looks for a previously saved language selection in localStorage to maintain persistence across sessions.
2. Browser Native Language Matching – If no stored preference exists, it inspects navigator.language. By default the library supports English and French; a match against the regex /^fr\b/ sets French automatically, otherwise English is used.

Translation Features

Compound Key Traversal

Translations are stored in nested dictionary objects. Keys can be accessed using dot‑notation (e.g., page_1.title). If a key is missing, the service returns the key wrapped in brackets (e.g., [page_1.title]), making missing translations easy to spot during development.

TranslationToken & HTML Parsing

Resolved translations are wrapped in a TranslationToken class. Using the html-to-react parser, the token converts raw HTML strings into safe React nodes automatically.

Rich Variable Interpolation

TranslationToken provides an .interpolate() method that scans the translation string for bracketed variables like {{variable}}. You can pass:

• Plain strings
• Functions returning React elements (the library uses ReactDOMServer.renderToString() to embed the component within the translation string)

Integration Example

import { TranslationService } from './translation-service-react';

// Access the singleton instance
const ts = TranslationService.instance;

// Programmatically update the active language
ts.setLanguage(value as Language);

// Resolving a simple nested string directly into a React Node
{ts.resolve('page_1.title')};

// Resolving a string that contains a variable (e.g., "Hello {{variable}}!")
{ts
  .resolve('text.with.variable')
  .interpolate({ variable: value })
  .toString()}

Conclusion

By bundling RxJS state management, seamless localStorage integration, HTML parsing, and advanced React node interpolation into a single package, translation-service-react abstracts away the boilerplate typically associated with localizing React applications. Whether you are dealing with simple text swaps or complex HTML‑embedded strings, it provides the tools necessary to make your frontend truly global.

GitHub Repository – translation-service-react