`useT` hook

useT hook を使用して props の文字列や属性（ボタンの aria-label など）を翻訳する。

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

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

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

t() 関数はコンポーネント内のどこでも使える。必要に応じて <T> コンポーネントの代わりにマークアップに使用することもできる。

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

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

変数

名前やカウントなどの値を文字列に入れるには、括弧を付けずに t をタグ付けされたテンプレートとして呼び出す。

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

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

Magic Translate は You have {0} unread messages を一度翻訳し、その値をアプリに戻すので、すべてのカウントで1つのキャッシュされた翻訳が機能する。値が Magic Translate に送信されることはない。これは <T> コンポーネントの v() と同じだ。

オプション

t() には <T> コンポーネントと同じオプションを渡すことができる。たとえば formality。

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

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

それには id が含まれている。このテキストの使用法を自分で編集する。

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

タグ付きのテンプレートにはオプションがない。変数と id の両方を含むテキストには、<T> コンポーネントを使う。

useT hook

変数

オプション

`useT` hook