React SDK

i18n para React, sin complicaciones

Internacionalización type-safe para aplicaciones React con hooks, context y entrega por CDN sin fricción.

Setup

Installation & Setup

Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.

Install

Add @better-i18n/use-intl and use-intl to your project.

terminal

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.

App.tsx

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.

MyComponent.tsx

import { useTranslations } from '@better-i18n/use-intl';

function MyComponent() {
  const t = useTranslations('common');
  return <h1>{t('welcome')}</h1>;
}

Capabilities

Características

Empieza con Better I18N en tu app de React en minutos.

API de React Hooks (useTranslations)

Soporte completo de TypeScript con autocompletado

Lazy loading para un tamaño de bundle óptimo

Formato de mensajes ICU con pluralización

Interpolación y formateo de variables

React Context para la gestión de locales

Soporte para SSR y SSG

Hot reload durante el desarrollo

Integración con DevTools

MyComponent.tsx

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>
  );
}

Provider fetches from the CDN once

useTranslations('common')

Every component reads from context

TtlCache · 60s

60s in-memory cache, offline fallback

t('welcome')

Keys typed from your project

Ecosystem

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.

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.

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.

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.

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.

Keep reading

Explora i18n para otros frameworks

Next.js i18n Vue i18n Nuxt i18n Angular i18n Svelte i18n Vite i18n Remix & Hydrogen i18n Expo i18n iOS i18n Flutter i18n TanStack Start i18n Server i18n Hono i18n Rust i18n

“Usamos Better I18N en nuestra plataforma Next.js y en las apps móviles. Una sola herramienta para cada producto: las traducciones se publican en cuanto hacemos push, sin redespliegues ni fricción.”

Samet Selcuk

Fundador, Hellospace

Empieza a construir con i18n para React

Plan gratuito disponible. No se requiere tarjeta de crédito.

Empieza gratis Leer documentación