`useT` hook

時々、プレーンなHTMLコンテンツ以外のものを翻訳する必要がある。このため、Magic Translate は useT hook を用意している。たとえば、props を翻訳するのに使える。

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

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

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

useT hook

オプション

`useT` hook