Einführung

Lingo.dev bietet mehrere Möglichkeiten, um zwischen Sprachen in Ihrer Anwendung zu wechseln. Sie können die integrierte <LocaleSwitcher />-Komponente verwenden oder benutzerdefinierte Umschalter mit den Hooks useLingoLocale() und setLingoLocale() erstellen.

Integrierter LocaleSwitcher

Die <LocaleSwitcher />-Komponente ist eine vorgefertigte Lösung, die automatisch den Sprachwechsel mit einer Dropdown-Oberfläche verwaltet.

import { LocaleSwitcher } from "@lingo.dev/react";

function App() {
  return (
    <div>
      <h1>My App</h1>
      <LocaleSwitcher locales={["en", "es", "de", "fr"]} />
    </div>
  );
}

Der LocaleSwitcher erledigt automatisch folgende Aufgaben:

Anzeige verfügbarer Sprachen
Anzeige der aktuell aktiven Sprache
Verarbeitung des Sprachwechsels bei Auswahl einer neuen Option

Benutzerdefinierte Sprachumschalter

Für mehr Kontrolle über die Benutzeroberfläche und das Verhalten können Sie benutzerdefinierte Sprachumschalter mit den Hooks useLingoLocale() und setLingoLocale() erstellen.

Select

Eine Dropdown-Auswahlkomponente, die eine saubere, native HTML-Select-Schnittstelle für den Sprachwechsel bietet. Sie können Ihre eigenen CSS-Stile verwenden, um das Design Ihrer Anwendung anzupassen.

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";

function CustomLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  return (
    <div className="locale-switcher">
      <select
        value={currentLocale}
        onChange={(e) => setLingoLocale(e.target.value)}
      >
        <option value="en">English</option>
        <option value="es">Spanish</option>
        <option value="de">German</option>
        <option value="fr">French</option>
      </select>
    </div>
  );
}

Buttons

Ein Button-basierter Umschalter mit Flaggen-Emojis und responsivem Design, der visuelles Feedback für die aktive Sprache bietet.

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";

function ButtonLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  const locales = [
    { code: "en", name: "English", flag: "🇺🇸" },
    { code: "es", name: "Spanish", flag: "🇪🇸" },
    { code: "de", name: "German", flag: "🇩🇪" },
    { code: "fr", name: "French", flag: "🇫🇷" },
  ];

  return (
    <div className="flex gap-2">
      {locales.map((locale) => (
        <button
          key={locale.code}
          onClick={() => setLingoLocale(locale.code)}
          className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-colors ${
            currentLocale === locale.code
              ? "bg-blue-500 text-white border-blue-500"
              : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"
          }`}
          title={locale.name}
        >
          <span className="text-lg">{locale.flag}</span>
          <span className="hidden sm:inline">{locale.name}</span>
        </button>
      ))}
    </div>
  );
}

Styling mit Design-Bibliotheken

Mit Hooks können Sie Ihre benutzerdefinierten Sprachwechsler mit jeder Design-Bibliothek stylen, die Sie bereits in Ihrem Projekt verwenden.

shadcn/ui

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

function ShadcnLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  return (
    <Select value={currentLocale} onValueChange={setLingoLocale}>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select language" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="en">🇺🇸 English</SelectItem>
        <SelectItem value="es">🇪🇸 Spanish</SelectItem>
        <SelectItem value="de">🇩🇪 German</SelectItem>
        <SelectItem value="fr">🇫🇷 French</SelectItem>
      </SelectContent>
    </Select>
  );
}

HeroUI

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";
import { Select, SelectItem } from "@heroui/react";

function HeroUILocaleSwitcher() {
  const currentLocale = useLingoLocale();

  const locales = [
    { key: "en", label: "🇺🇸 English" },
    { key: "es", label: "🇪🇸 Spanish" },
    { key: "de", label: "🇩🇪 German" },
    { key: "fr", label: "🇫🇷 French" },
  ];

  return (
    <Select
      label="Language"
      selectedKeys={[currentLocale]}
      onSelectionChange={(keys) => setLingoLocale(Array.from(keys)[0])}
      className="max-w-xs"
    >
      {locales.map((locale) => (
        <SelectItem key={locale.key}>{locale.label}</SelectItem>
      ))}
    </Select>
  );
}

Mantine

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";
import { Select } from "@mantine/core";

function MantineLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  const locales = [
    { value: "en", label: "🇺🇸 English" },
    { value: "es", label: "🇪🇸 Spanish" },
    { value: "de", label: "🇩🇪 German" },
    { value: "fr", label: "🇫🇷 French" },
  ];

  return (
    <Select
      label="Language"
      value={currentLocale}
      onChange={setLingoLocale}
      data={locales}
      w={200}
    />
  );
}

Chakra UI

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";
import { Select, createListCollection } from "@chakra-ui/react";

function ChakraLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  const locales = createListCollection({
    items: [
      { label: "🇺🇸 English", value: "en" },
      { label: "🇪🇸 Spanish", value: "es" },
      { label: "🇩🇪 German", value: "de" },
      { label: "🇫🇷 French", value: "fr" },
    ],
  });

  return (
    <Select.Root
      collection={locales}
      value={[currentLocale]}
      onValueChange={(e) => setLingoLocale(e.value[0])}
      size="sm"
    >
      <Select.HiddenSelect />
      <Select.Label>Language</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select language" />
        </Select.Trigger>
        <Select.IndicatorGroup>
          <Select.Indicator />
        </Select.IndicatorGroup>
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          {locales.items.map((locale) => (
            <Select.Item item={locale} key={locale.value}>
              {locale.label}
              <Select.ItemIndicator />
            </Select.Item>
          ))}
        </Select.Content>
      </Select.Positioner>
    </Select.Root>
  );
}

Dies ermöglicht es Ihnen, konsistente Design-Muster in Ihrer Anwendung beizubehalten, während Sie benutzerdefinierte Funktionen zur Sprachumschaltung entwickeln.