React i18n 变得简单
具有 Hooks、Context 和无缝 CDN 交付的 React 应用程序的安全国际化类型。
Get started in 3 steps
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intl
Wrap your app with BetterI18nProvider
Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.
import { BetterI18nProvider } from '@better-i18n/use-intl';
function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<YourApp />
</BetterI18nProvider>
);
}Use translations
Call useTranslations() in any component to access your translation keys with full TypeScript support.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return <h1>{t('welcome')}</h1>;
}功能
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
# 1. Install
npm install @better-i18n/use-intl
# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'
function App() {
return (
<BetterI18nProvider project="org/project" locale="en">
<YourApp />
</BetterI18nProvider>
)
}
# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'
function MyComponent() {
const t = useTranslations('common')
return <h1>{t('welcome')}</h1>
}兼容流行的 React i18n 库
Better i18n 不是你喜爱的 i18n 库的替代品——它是让这些库更强大的翻译管理层。
Better i18n + react-intl
最流行的 React i18n 库，支持 ICU 消息格式。被数千个生产应用使用。
Better i18n 将翻译直接同步为 react-intl JSON 格式。在仪表盘编辑，即时在应用中查看更改。
Better i18n + react-i18next
基于 i18next 的强大 React i18n 框架。内置命名空间、插值和复数等功能。
导出为带命名空间的 i18next 兼容 JSON。Better i18n 处理翻译流程，i18next 处理运行时。
Better i18n + FormatJS
一套国际化库集合，包含 react-intl。支持 ICU 消息语法和 CLDR 数据。
Better i18n 原生支持 ICU 消息格式。可视化管理复杂的复数和选择语法，导出为 FormatJS 格式。
Better i18n + Lingui
一个可读性强、自动化且优化的 i18n 库。基于宏的消息提取带来出色的开发体验。
使用 Lingui CLI 提取消息，在 Better i18n 中管理翻译，通过 GitHub 集成自动同步。
快速开始
用 Better i18n 在几分钟内为你的 React 应用完成上手。
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('greeting', { name: 'World' })}</p>
</div>
);
}Related Articles
Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung
Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung Django wird mit einem ausgereiften Internationalisierungs-Framework (i18n) geliefert,...
Read more →Developer Experience Deep Dive: How Better i18n's Platform UX Makes Localization Fast and Intuitive
Localization platforms have a reputation for clunky interfaces, slow editors, and workflows that feel like they were designed by committee. We built...
Read more →Media Management with Unsplash Integration: A Complete CMS Guide
Managing media alongside translations has always been an afterthought in most i18n tools. You translate the text, then manually handle images in a...
Read more →