Language Toggle

The LangToggle component provides a visual toggle group for switching between available languages in your Electron application. It integrates with react-i18next for internationalization and persists the selected language preference.

Features

• Visual language switcher: Displays available languages as a toggle group
• i18next integration: Seamlessly works with react-i18next for translations
• Persistent selection: Saves language preference through the IPC layer
• Dynamic language list: Automatically renders options from your configured languages

Usage

import LangToggle from "@/components/lang-toggle";

export default function Settings() {
  return (
    <div>
      <h2>Language Settings</h2>
      <LangToggle />
    </div>
  );
}

How It Works

1. The component retrieves the current language from i18n.language using the useTranslation hook
2. Available languages are loaded from the @/localization/langs configuration file
3. When a user selects a language, setAppLanguage is called to:
   • Update the i18next instance with the new language
   • Persist the preference through the IPC layer

Examples

Basic Usage

import LangToggle from "@/components/lang-toggle";

export default function SettingsPage() {
  return (
    <div className="space-y-6">
      <section>
        <h3 className="text-lg font-medium mb-2">Language</h3>
        <p className="text-sm text-muted-foreground mb-4">
          Select your preferred language
        </p>
        <LangToggle />
      </section>
    </div>
  );
}

Configuring Languages

Go to Inernationalization to learn how to set up and configure available languages for your application.

Related Components