The useT hook

Use the useT hook to translate strings in props and attributes, such as a button's aria-label.

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

Variables

To put values such as a name or a count into a string, call t as a tagged template, without parentheses:

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

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

Magic Translate translates You have {0} unread messages once and puts the value back in your app, so one cached translation works for every count. The values are never sent to Magic Translate. This is the same as v() in the <T> component.

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

That includes id, to edit this use of the text on its own:

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

The tagged template takes no options. For a text with both variables and an id, use the <T> component.