Le useT hook

Parfois, tu dois traduire autre chose que du contenu HTML. Pour cela, Magic Translate propose le useT hook. Tu peux l'utiliser, par exemple, pour traduire props.

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>;
};

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>;
};