General Translation  
DokumentationDashboardBlogDiscord

Sprache ändern

So ändern Sie die Sprache Ihrer React-App

Übersicht

In diesem Leitfaden zeigen wir Ihnen, wie Sie die Sprache Ihrer React-App ändern können.

Falls Sie Ihre App noch nicht mit gt-react eingerichtet haben, lesen Sie bitte zunächst die Schnellstart-Anleitung, bevor Sie fortfahren.

Es gibt drei Möglichkeiten, die Sprache Ihrer App mit gt-react zu ändern.

  1. Mit dem useSetLocale() Hook
  2. Mit der <LocaleSelector> Komponente
  3. Mit dem useLocaleSelector() Hook

Wir werden in diesem Leitfaden alle drei Methoden behandeln.

Verwendung des useSetLocale-Hooks

Der useSetLocale-Hook ist ein clientseitiger Hook, mit dem du die Sprache deiner App ändern kannst. Er muss innerhalb einer GTProvider-Komponente verwendet werden.

import { useSetLocale } from 'gt-react';
export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}

Gib einfach das gewünschte Locale als Argument an die Callback-Funktion weiter, die vom useSetLocale-Hook zurückgegeben wird.

Verwendung der <LocaleSelector> Komponente

Die <LocaleSelector> Komponente ist eine clientseitige Komponente, mit der du die Sprache deiner App ändern kannst. Sie muss innerhalb einer GTProvider Komponente verwendet werden.

Dies ist ein minimalistisches UI-Dropdown, das alle in deinem Projekt aktivierten Sprachen anzeigt und es den Nutzern ermöglicht, eine andere Sprache auszuwählen.

import { LocaleSelector } from 'gt-react';

export default function MyComponent() {
  return <LocaleSelector />;
}

Verwendung des useLocaleSelector-Hooks

Alternativ können Sie, wenn Sie Ihre eigene Locale-Auswahlkomponente erstellen möchten, den useLocaleSelector-Hook verwenden.

Dieser Hook gibt die aktuelle Locale, die Liste der von Ihrem Projekt unterstützten Locales und den useSetLocale-Hook zurück.

Hier ist ein Beispiel, wie Sie den useLocaleSelector-Hook verwenden können, um eine benutzerdefinierte Locale-Auswahlkomponente zu erstellen.

import { useLocaleSelector } from 'gt-react';
import { getLocaleProperties } from 'generaltranslation';

function capitalizeLanguageName(language: string): string {
  if (!language) return '';
  return (
    language.charAt(0).toUpperCase() +
    (language.length > 1 ? language.slice(1) : '')
  );
}

export default function LocaleDropdown({ className }: { className?: string }) {
  // Retrieve the locale, locales, and setLocale function
  const { locale, locales, setLocale } = useLocaleSelector();

  // Helper function to get the display name of a locale
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // If no locales are returned, just render nothing or handle gracefully
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <Select onValueChange={setLocale} defaultValue={locale}>
      <SelectTrigger>
        <SelectValue placeholder='Select language' />
      </SelectTrigger>
      <SelectContent className='z-[200!important]' position='popper'>
        <SelectGroup>
          {!locale && <SelectItem value='' />}

          {locales.map((locale) => (
            <SelectItem key={locale} value={locale} suppressHydrationWarning>
              {getDisplayName(locale)}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

Weitere Informationen finden Sie in der API-Referenz.

Nächste Schritte

Wie ist dieser Leitfaden?

Auf GitHub bearbeiten

Verwendung von Branches

Wie man Branch-Komponenten verwendet

Lokale Übersetzungen

So richten Sie lokale Übersetzungen für Ihre React-App ein

Auf dieser Seite

Übersicht
Verwendung des useSetLocale-Hooks
Verwendung der <LocaleSelector> Komponente
Verwendung des useLocaleSelector-Hooks
Nächste Schritte