useT hook

Użyj useT hook, aby przetłumaczyć ciągi znaków w props i atrybuty, takie jak aria-label przycisku.

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

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

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

Funkcję t() można używać w dowolnym miejscu wewnątrz komponentu. Możesz również użyć go w znaczniku zamiast składnika <T>, jeśli wolisz.

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

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

Zmienne

Aby umieścić wartości takie jak nazwa lub liczba w ciągu znaków, wywołaj t jako szablon oznaczony bez nawiasów:

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

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

Magic Translate tłumaczy You have {0} unread messages raz i ponownie umieszcza wartość w aplikacji, więc jedno tłumaczenie w pamięci podręcznej działa na każdą liczbę. Wartości nigdy nie są wysyłane do Magic Translate. To samo, co v() w komponencie <T>.

Opcje

Możesz przekazać te same opcje do t(), co do komponentu <T>, na przykład formality.

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

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

Obejmuje to id, aby samodzielnie edytować to użycie tekstu:

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

Otagowany szablon nie ma opcji. W przypadku tekstu zawierającego zarówno zmienne, jak i id, użyj komponentu <T>.