useT hook

props içindeki dizeleri ve bir düğmenin aria-label gibi öznitelikleri çevirmek için useT hook işaretini kullanın.

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

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

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

t() işlevini bileşeninizin herhangi bir yerinde kullanabilirsiniz. İsterseniz <T> bileşeni yerine işaretlemenizde de kullanabilirsiniz.

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

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

Değişkenler

Bir dizeye ad veya sayım gibi değerleri koymak için t öğesini parantez olmadan etiketli şablon olarak çağırın:

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

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

Magic Translate, You have {0} unread messages 'yi bir kez çevirir ve değeri uygulamanıza geri koyar, böylece her sayım için önbelleğe alınmış bir çeviri çalışır. Değerler asla Magic Translate adresine gönderilmez. Bu, <T> bileşenindeki v() ile aynıdır.

Seçenekler

t() öğesine <T> bileşeniyle aynı seçenekleri iletebilirsiniz, örneğin formality.

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

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

Bu, metnin bu kullanımını kendi başına düzenlemek için id içerir:

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

Etiketli şablon hiçbir seçenek almaz. Hem değişkenli hem de id içeren bir metin için <T> bileşenini kullanın.