useT hook

Используйте useT hook для перевода строк в props и атрибутов, таких как кнопка aria-label.

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

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

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

Функцию t() можно использовать в любом месте компонента. Вы также можете использовать ее в своей разметке вместо компонента <T>, если хотите.

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

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

Переменные

Чтобы ввести в строку такие значения, как имя или количество, вызовите t в качестве шаблона с тегами без скобок:

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

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

Magic Translate переводит You have {0} unread messages один раз и возвращает значение обратно в ваше приложение, поэтому для каждого значения работает один кэшированный перевод. Значения никогда не отправляются в Magic Translate. Это то же самое, что и v() в компоненте <T>.

Опции

В t() можно передать те же параметры, что и компоненту <T>, например formality.

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

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

Сюда входит id, позволяющая самостоятельно отредактировать использование текста:

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

Шаблон с тегами не принимает никаких опций. Для текста, содержащего обе переменные и id, используйте компонент <T>.