The useT hook

Sometimes you need to translate something other than plain HTML content. For this, Magic Translate offers the useT hook. You can use it, for example, to translate props.

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

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

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

You can use the t() function anywhere inside your component. You can also use it in your markup instead of the <T> component if you prefer.

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

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

Options

You can pass the same options to t() as to the <T> component, for example formality.

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

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