Skip to content

TranslationProvider Component

Description

The TranslationProvider is a wrapper for internationalization (i18n) using i18next in the Liberty Framework. It ensures that translations are available across the application.

Features

  • Uses i18next for managing translations.
  • Provides language switching support.
  • Works seamlessly with the AppProvider.

Props

Prop Type Default Description
children ReactNode - Components wrapped by the translation provider.

Example Usage

To use the TranslationProvider, wrap it around your application inside ReactDOM.createRoot:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import React from "react";
import ReactDOM from "react-dom/client";
import { AppProvider, TranslationProvider } from "@nomana-it/liberty-core"
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
      <AppProvider useAuth={oidcUseAuth}>
        <TranslationProvider>
            <App />
        </TranslationProvider>
    </AppProvider>
  </React.StrictMode>
);

Notes

  • The TranslationProvider should always wrap the application inside the AppProvider to ensure translations are available globally.
  • It integrates with i18next, and translations can be managed dynamically. `;

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core