React

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

Configuración

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

Puede utilizar el SDK de i1n en modo autónomo (reemplazando i18next por completo) o conectarlo mediante el modo Bridge para mantener su biblioteca actual.

Modo independiente

Utilice el patrón de proveedor de i1n para React para obtener una experiencia plug-and-play. Inicialice con init(), cree un I1nProvider que sincronice el estado de la configuración regional con el SDK y utilice el hook useI1n() en sus componentes.

Este enfoque proporciona una selección de idioma persistente a través de localStorage, cambio de idioma en tiempo de ejecución con setLocale() y autocompletado completo con seguridad de tipos a través del archivo generado i1n.d.ts; no se requiere ninguna biblioteca de i18n externa.

Modo puente con i18next

Si su proyecto utiliza i18next, conéctelo con una sola línea: registerI1n((key, params) => i18next.t(key, params)). La función t() de i1n ahora delega en i18next internamente, pero con verificación de tipos estricta y autocompletado.

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

Despliegue

Agregue i1n pull a su paso de compilación o a su flujo de trabajo de CI/CD. Los archivos de traducción generados y el archivo 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 de control

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

Modo puente

Conserve su biblioteca de i18n actual mientras añade el autocompletado con seguridad de tipos, la traducción por IA y la gestión de archivos de i1n.