Le useT hook

Utilise le useT hook pour traduire les chaînes en props et les attributs, tels que le aria-label d'un bouton.

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

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

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

Tu peux utiliser la fonction t() n'importe où dans ton composant. Tu peux également l'utiliser dans ton balisage à la place du composant <T> si tu préfères.

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

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

Variables

Pour mettre des valeurs telles qu'un nom ou un nombre dans une chaîne, appelle t comme modèle balisé, sans parenthèses :

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

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

Magic Translate traduit You have {0} unread messages une fois et réintègre la valeur dans ton application. Ainsi, une traduction en cache fonctionne pour chaque compte. Les valeurs ne sont jamais envoyées à Magic Translate. C'est la même chose que v() dans la composante <T>.

Options

Tu peux transmettre les mêmes options à t() qu'au composant <T>, par exemple formality.

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

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

Cela inclut id, pour modifier cette utilisation du texte de manière autonome :

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

Le modèle tagué ne propose aucune option. Pour un texte contenant à la fois des variables et un id, utilise le composant <T>.