i18n para React, sin complicaciones
Internacionalización type-safe para aplicaciones React con hooks, context y entrega por CDN sin fricción.
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>;
}Características
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>
}Funciona con bibliotecas de i18n populares para React
Better i18n no reemplaza tu biblioteca i18n favorita: es la capa de gestión de traducciones que las hace aún más potentes.
Better i18n + react-intl
La biblioteca de i18n para React más popular con soporte para formato de mensajes ICU. Usada por miles de apps en producción.
Better i18n sincroniza tus traducciones directamente al formato JSON de react-intl. Edita en nuestro dashboard y ve los cambios en tu app al instante.
Better i18n + react-i18next
Framework de i18n potente para React basado en i18next. Incluye namespaces, interpolación y plurales.
Exporta a JSON compatible con i18next con namespaces. Better i18n gestiona el workflow de traducción; i18next gestiona el runtime.
Better i18n + FormatJS
Un conjunto de bibliotecas de internacionalización que incluye react-intl. Soporta la sintaxis de mensajes ICU y datos CLDR.
Better i18n soporta el formato de mensajes ICU de forma nativa. Gestiona plurales y selects complejos de forma visual y exporta al formato de FormatJS.
Better i18n + Lingui
Una biblioteca de i18n legible, automatizada y optimizada. Gran DX con extracción de mensajes basada en macros.
Extrae mensajes con la CLI de Lingui, gestiona traducciones en Better i18n y sincroniza de vuelta automáticamente mediante la integración con GitHub.
Inicio rápido
Empieza con Better i18n en tu app de React en minutos.
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
How to Add i18n to Shopify Hydrogen (Complete Guide)
Shopify Hydrogen is the modern way to build custom storefronts — but adding internationalization (i18n) can be challenging. You need locale-aware routing,...
Read more →Django i18n con Traducción por IA: Guía Completa de Configuración
Django i18n con Traducción por IA: Guía Completa de Configuración Django incluye un framework de internacionalización (i18n) maduro construido sobre GNU...
Read more →Better i18n vs. Crowdin: Una Comparación Honesta para Equipos de Apps Modernas
Crowdin ha sido la opción por defecto para la gestión de traducciones durante años. Es maduro, con muchas funcionalidades, y la mayoría de los ingenieros...
Read more →Empieza a construir con i18n para React
Plan gratuito disponible. No se requiere tarjeta de crédito.