@magic-translate /反应

React客户端 神奇的翻译，人工智能驱动的i18n 没有翻译键或语言文件。把你的组件写在一个里面 语言，把文字包起来 <T>， Magic Translate可以即时翻译。

<button>
  <T>Create chord chart</T>
</button>

否 t('editor.toolbar.create'),没有 en.json / de.json 保持同步，并且 添加一种语言是一行。翻译被缓存，并且可以被编辑 把仪表盘交上来。

需要React 17或更新版本。用于使用Next.js或React进行服务器端渲染 服务器组件，使用 @magic-translate/react-ssr.

完整的文档: magictranslate.io / docs /反应

安装

npm install --save @magic-translate/react

或用纱线：

yarn add @magic-translate/react

设置

把你的应用包裹起来 MagicTranslateProvider． 您可以免费获得API密钥 magictranslate.io.

// main.tsx
import { createRoot } from 'react-dom/client';
import { MagicTranslateProvider } from '@magic-translate/react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <MagicTranslateProvider apiKey="YOUR_API_KEY" language="de">
    <App />
  </MagicTranslateProvider>
);

使用

<T> 组件

将任何文本（包括纯HTML）包装在 <T>． 显示原始内容 直到它的翻译加载完成。

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

export const Welcome = ({ name }: { name: string }) => (
  <>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
    <p>
      <T>
        Click <a href="/sale">here</a> to see <b>today's</b> deals.
      </T>
    </p>
    <p>
      <T>Hello {name}</T>
    </p>
  </>
);

内容一旦发生变化，就会被重新翻译，例如当 name 上面示例中的更改。

同时请求的所有翻译都被发送到API 请求和翻译被缓存，因此您可以使用尽可能多的 <T> 组件 随你便。

只允许使用文本和纯HTML元素 <T>． 反应组件 不是，因为它们无法在翻译中存活； <T> 如果找到就抛出 一个。而是在组件内部进行翻译，或者将翻译后的字符串向下传递 作为道具。

useTranslate

使用 useTranslate （或其别名） useT)用于普通字符串，例如属性， 或者组件不适合的地方：

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

export const Search = () => {
  const t = useTranslate();

  return <input placeholder={t('Search products')} />;
};

t 返回原始文本，直到翻译加载完成 组件一旦完成就会重新渲染。

变量

将更改的值（如名称或计数）包装在 v()． 周围的文字 它们被翻译成模板， You have {0} unread messages, 缓存，无论它显示多少不同的值。价值观本身 永远不会被发送到API。

import { T, v } from '@magic-translate/react';

<T>
  Hello {v(user.name)}, you have {v(count)} unread messages
</T>;

占位符按顺序编号，翻译可以将它们移动到 语言需要它们的地方。 v() 也可以容纳一个React组件，比如 作为链接。

与 t，使用带标签的模板。每一个 ${} Value的处理方式相同：

const t = useTranslate();

t`You have ${count} unread messages`;

没有 v()，一个值被翻译为文本的一部分，因此每个值都不同 价值是一种新的翻译。

每个翻译选项

组件和 t 可以覆盖目标语言和形式：

<T lang="fr" formality="formal">How are you?</T>

<input placeholder={t('Your name', { lang: 'fr', formality: 'formal' })} />

切换语言

useLanguageSwitcher 读取并更改当前语言。每一个 <T> 组件和 t 呼叫自动更新。

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

export const LanguageSwitcher = () => {
  const { currentLanguage, setLanguage } = useLanguageSwitcher();

  return (
    <select
      value={currentLanguage}
      onChange={(e) => setLanguage(e.target.value as typeof currentLanguage)}
    >
      <option value="en">English</option>
      <option value="de">Deutsch</option>
      <option value="fr">Français</option>
    </select>
  );
};

配置

MagicTranslateProvider 接受:

其他框架

• @magic-translate/react-ssr： Next.js应用路由器和React服务器组件
• @magic-translate/vue： Vue 3和next
• @magic-translate/angular:角
• @magic-translate/js：任何网站，只有一个脚本标签

许可证

麻省理工学院© i42 GmbH是一家