Il useT hook

Usa useT hook per tradurre stringhe in props e attributi, come aria-label di un pulsante.

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

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

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

Puoi usare la funzione t() ovunque all'interno del tuo componente. Puoi anche usarlo nel tuo markup al posto del componente <T>, se preferisci.

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

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

Variabili

Per inserire valori come un nome o un conteggio in una stringa, chiama t come modello con tag, senza parentesi:

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 volta e reinserisce il valore nella tua app, quindi una traduzione memorizzata nella cache funziona per ogni conteggio. I valori non vengono mai inviati a Magic Translate. È lo stesso di v() nel componente <T>.

Opzioni

Puoi passare a t() le stesse opzioni del componente <T>, ad esempio formality.

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

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

Ciò include id, per modificare questo uso del testo da solo:

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

Il modello con tag non richiede opzioni. Per un testo con entrambe le variabili e un id, usa il componente <T>.