Sprache ändern

Übersicht

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

Wenn Sie Ihre App noch nicht mit gt-react eingerichtet haben, lesen Sie bitte zuerst die Einrichtungsanleitung.

Einrichtung

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

1. Verwendung des useSetLocale() Hooks
2. Verwendung der <LocaleSelector> Komponente
3. Verwendung des useLocaleSelector() Hooks

In dieser Anleitung werden wir alle drei Methoden behandeln.

Verwendung des useSetLocale Hooks

Der useSetLocale Hook ist ein clientseitiger Hook, der es Ihnen ermöglicht, die Sprache Ihrer App zu ändern. 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>;
}

Geben Sie einfach das Gebietsschema, zu dem Sie wechseln möchten, als Argument an die Callback-Funktion, die vom useSetLocale Hook zurückgegeben wird.

Verwendung der <LocaleSelector>-Komponente

Die <LocaleSelector>-Komponente ist eine clientseitige Komponente, die es Ihnen ermöglicht, die Sprache Ihrer App zu ändern. Sie muss innerhalb einer GTProvider-Komponente verwendet werden.

Dies ist ein einfaches UI-Dropdown, das alle Sprachen anzeigt, die Sie in Ihrem Projekt aktiviert haben, und es Benutzern 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 Komponente zur Sprachauswahl erstellen möchten, den useLocaleSelector Hook verwenden.

Dieser Hook gibt die aktuelle Sprache, die Liste der verfügbaren Sprachen und den useSetLocale Hook zurück.

import { useLocaleSelector } from 'gt-react';

Weitere Informationen finden Sie in der API-Referenz.

Nächste Schritte

• Erfahren Sie mehr über den useSetLocale Hook.
• Erfahren Sie mehr über die <LocaleSelector> Komponente.
• Erfahren Sie mehr über den useLocaleSelector Hook.