O useT hook

Use o useT hook para traduzir strings em props e atributos, como aria-label de um botão.

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

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

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

Você pode usar a função t() em qualquer lugar dentro do seu componente. Você também pode usá-lo em sua marcação em vez do componente <T>, se preferir.

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

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

Variáveis

Para colocar valores como um nome ou uma contagem em uma string, chame t como um modelo marcado, sem parênteses:

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

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

Magic Translate traduz You have {0} unread messages uma vez e coloca o valor de volta em seu aplicativo, então uma tradução em cache funciona para cada contagem. Os valores nunca são enviados para Magic Translate. Isso é o mesmo que v() no componente <T>.

Opções

Você pode passar as mesmas opções para t() e para o componente <T>, por exemplo formality.

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

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

Isso inclui id, para editar esse uso do texto sozinho:

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

O modelo marcado não tem opções. Para um texto com ambas as variáveis e um id, use o componente <T>.