useT hook

Gunakan useT hook untuk menerjemahkan string di props dan atribut, seperti tombol aria-label.

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

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

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

Anda dapat menggunakan fungsi t() di mana saja di dalam komponen Anda. Anda juga dapat menggunakannya dalam markup Anda alih-alih komponen <T> jika Anda mau.

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

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

Variabel

Untuk memasukkan nilai seperti nama atau hitungan ke dalam string, panggil t sebagai template yang ditandai, tanpa tanda kurung:

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

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

Magic Translate menerjemahkan You have {0} unread messages sekali dan mengembalikan nilainya ke aplikasi Anda, sehingga satu terjemahan cache berfungsi untuk setiap hitungan. Nilai tidak pernah dikirim ke Magic Translate. Ini sama dengan v() di komponen <T>.

Pilihan

Anda dapat meneruskan opsi yang sama ke t() seperti ke komponen <T>, misalnya formality.

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

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

Itu termasuk id, untuk mengedit penggunaan teks ini sendiri:

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

Template yang ditandai tidak membutuhkan opsi. Untuk teks dengan variabel dan id, gunakan komponen <T>.