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
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 →Análisis Profundo de la Experiencia del Desarrollador: Cómo la UX de la Plataforma de Better i18n Hace la Localización Rápida e Intuitiva
Las plataformas de localización tienen fama de interfaces torpes, editores lentos y flujos de trabajo que parecen diseñados por comité. Construimos Better...
Read more →Gestión de medios con integración de Unsplash: Una guía completa de CMS
Gestionar medios junto con las traducciones siempre ha sido una idea de último momento en la mayoría de las herramientas i18n. Traduces el texto y luego...
Read more →Empieza a construir con i18n para React
Plan gratuito disponible. No se requiere tarjeta de crédito.