A tiny React component library (JS)
npm install @react-lib-tech/multi-lang-rendererA lightweight runtime i18n layer for React apps that:
- reads translations from a JSON payload,
- exposes a translate(key) function via context,
- auto-translates visible text, placeholders, and titles in the DOM (including newly added nodes) using a MutationObserver,
- optionally integrates with Google Translate for runtime language switching.
The provider also emits useful callbacks for:
- reporting all seen text keys (GetHTMLTagsConents),
- diffing added/removed/changed keys (onChanges).
---
- Installation
- Quick Start
- Accepted JSON format
- Props
- Context API
- How auto-translation works
- GoogleTranslate Wrapper
- translate="no" Usage
- Marking keys explicitly (data-lang)
- Ignoring text / special characters
- Performance notes
- Troubleshooting
---
This provider is plain React; no extra packages are required beyond React itself.
``bash`
npm i @react-lib-tech/multi-lang-renderer
---
Wrap your app with the TranslationProvider and pass the active lang and the JSONData (translations payload you fetched).
`tsx
import { TranslationProvider } from '@react-lib-tech/multi-lang-renderer';
function Root() {
const [language, setLanguage] = useState('en');
const [translations, setTranslations] = useState({}); // or array form (see below)
return (
JSONData={translations}
GetHTMLTagsConents={({ AllTagsTextContent, NewTagsTextContent }) => {
console.log({ AllTagsTextContent, NewTagsTextContent });
}}
onChanges={({ added, removed, changed }) => {
console.log({ added, removed, changed });
}}
AddHTMLTags={['button', 'small']}
SpecialChars={['•']}
>
);
}
`
---
The provider accepts either of these shapes via JSONData:
`json`
{
"APP_TITLE": "My Application",
"LOGIN": "Login",
"LOGOUT": "Logout"
}
`json`
[
{ "APP_TITLE": "My Application" },
{ "LOGIN": "Login" },
{ "LOGOUT": "Logout" }
]
> Tip: Prefer the object map for faster lookups.
---
| Prop | Type | Default | Description |
|----------------------|--------------------------------------|---------|-------------|
| lang | string | — | Current language code. Also sets
. |
| JSONData | Record | [] | Translation payload (object map or array of single-key objects). |
| onChanges | ({added, removed, changed, NewTagsTextContent}) => void | undefined | Callback fired after a scan; diffs are computed between seen text keys and translation keys. |
| AddHTMLTags | string[] | [] | Extra HTML tags to include in the scan. |
| SpecialChars | string[] | [] | Additional characters that mark text as “special”. |
| GetHTMLTagsConents | ({ AllTagsTextContent, NewTagsTextContent }) => void | undefined | Returns maps of all seen text keys and newly encountered ones. |
| children | ReactNode | — | Your app. |---
Context API
Use
useTranslation() to access:`ts
type TranslationContextValue = {
translate: (key: string) => string;
language: string;
};
`-
looks up the key in the normalized translations object.
- If the key is missing, the original key is returned.---
How auto-translation works
1. Initial pass
After a short debounce (500ms), the provider queries a list of tags and calls
translateTextNodes(el).2. What’s translated
- Text nodes (
Node.TEXT_NODE)
- Attributes: title, placeholder3. Skip conditions
- Empty text, pure numbers, or special characters.
4. Dynamic DOM
A
watches document.body and re-translates nodes dynamically.5.
data-lang attribute
If an element has data-lang="KEY", it enforces that key.---
GoogleTranslate Wrapper
For apps that need runtime Google Translate integration with a Material-UI dropdown, use the
GoogleTranslate component.$3
`tsx
import { GoogleTranslate } from '@react-lib-tech/multi-lang-renderer';function Root() {
return (
);
}
`---
$3
- Initializes language from
.
- Injects Google Translate script only once.
- Removes branding and unwanted styles.
- Renders a Material-UI