Das useT hook

Verwende useT hook, um Zeichenketten in props und Attribute wie aria-label einer Schaltfläche zu übersetzen.

import { useT } from '@magic-translate/react';

const MyComponent = () => {
  const t = useT();

  return (
    <button aria-label={t('Main menu')}>
      <HamburgerIcon />
    </button>
  );
};

Du kannst die Funktion t() überall in deiner Komponente verwenden. Du kannst es auch in deinem Markup anstelle der <T>-Komponente verwenden, wenn du das bevorzugst.

const MyComponent = () => {
  const t = useT();

  return <p>{t('This will be translated')}</p>;
};

Variablen

Um Werte wie einen Namen oder eine Anzahl in eine Zeichenfolge einzufügen, rufe t als markierte Vorlage ohne Klammern auf:

const MyComponent = ({ count }: { count: number }) => {
  const t = useT();

  return <p>{t`You have ${count} unread messages`}</p>;
};

Magic Translate übersetzt You have {0} unread messages einmal und fügt den Wert wieder in deine App ein, sodass eine zwischengespeicherte Übersetzung für jede Zählung funktioniert. Die Werte werden niemals an Magic Translate gesendet. Das ist dasselbe wie v() in der Komponente <T>.

Optionen

Du kannst die gleichen Optionen an t() übergeben wie an die <T>-Komponente, zum Beispiel formality.

const MyComponent = () => {
  const t = useT();

  return <button>{t('Please click here', { formality: 'formal' })}</button>;
};

Das beinhaltet id, um diese Verwendung des Textes eigenständig zu bearbeiten:

<button aria-label={t('Save', { id: 'checkout-save' })} />

Die markierte Vorlage hat keine Optionen. Für einen Text mit beiden Variablen und einem id verwende die Komponente <T>.