El useT hook

Usa el useT hook para traducir cadenas de props y atributos, como el aria-label de un botón.

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

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

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

Puedes usar la función t() en cualquier parte de tu componente. También puedes usarlo en tu marcado en lugar del componente <T>, si lo prefieres.

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

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

Variables

Para poner valores como un nombre o un recuento en una cadena, llama a t como plantilla etiquetada, sin paréntesis:

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

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

Magic Translate traduce You have {0} unread messages una vez y devuelve el valor a tu aplicación, por lo que una traducción en caché funciona para cada recuento. Los valores nunca se envían a Magic Translate. Es lo mismo que el v() en el componente <T>.

Opciones

Puedes pasarle las mismas opciones a t() que al componente <T>, por ejemplo formality.

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

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

Eso incluye id, para editar este uso del texto por sí solo:

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

La plantilla etiquetada no admite opciones. Para un texto con ambas variables y un id, usa el componente <T>.