React

Integre i1n con React utilizando el SDK de i1n o el Modo Bridge con i18next / react-intl.

Configuración

Ejecuta i1n init en tu proyecto de React. La CLI detecta automáticamente react-i18next o i18next si están presentes y configura el formato JSON anidado.

Puedes usar el SDK de i1n en modo autónomo (reemplazando i18next por completo) o conectarlo a través del Modo Puente para mantener tu biblioteca existente.

Modo Independiente

Utilizá el patrón de proveedor de i1n React para una experiencia plug-and-play. Inicializá con init(), creá un I1nProvider que sincronice el estado de la localización con el SDK, y usá el hook useI1n() en tus componentes.

Este enfoque proporciona selección de locale persistente a través de localStorage, cambio de idioma en tiempo de ejecución con setLocale(), y autocompletado totalmente type-safe a través del i1n.d.ts generado — no se necesita ninguna biblioteca externa de i18n.

Modo Puente con i18next

Si tu proyecto usa i18next, conéctalo con una línea: registerI1n((key, params) => i18next.t(key, params)). La función t() de i1n ahora delega a i18next internamente, pero con verificación estricta de tipos y autocompletado.

Para proyectos que usan react-intl (FormatJS), usa: registerI1n((key, params) => intl.formatMessage({ id: key }, params)). El Modo Puente funciona con cualquier función de traducción: pasale cualquier callback (key, params) => string a registerI1n().

Despliegue

Agregue i1n pull a su paso de compilación o pipeline de CI/CD. Los archivos de traducción generados y i1n.d.ts se confirman en su repositorio.

Funciona con Vite, Create React App, Remix y cualquier framework basado en React.

src/App.tsx

import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

Bridge Mode — i18next

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

Bridge Mode — react-intl

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

Relacionado

Panel

Guía del panel web de i1n: creación de cuentas, organizaciones, claves de API, edición de traducciones y gestión de equipos.

Modo Puente

Conservá tu biblioteca i18n existente mientras agregás el autocompletado con seguridad de tipos, la traducción con IA y la gestión de archivos de i1n.