React

Integra i1n con React utilizzando l'SDK i1n o la modalità Bridge con i18next / react-intl.

Configurazione

Esegui i1n init nel tuo progetto React. La CLI rileva automaticamente react-i18next o i18next, se presenti, e configura il formato JSON nidificato.

Puoi usare l'SDK i1n in modalità standalone (sostituendo interamente i18next) o connetterlo tramite la modalità Bridge per mantenere la tua libreria esistente.

Modalità Autonoma

Usa il pattern del provider i1n React per un'esperienza plug-and-play. Inizializza con init(), crea un I1nProvider che sincronizzi lo stato della localizzazione con l'SDK e usa l'hook useI1n() nei tuoi componenti.

Questo approccio fornisce la selezione persistente del locale tramite localStorage, il cambio di lingua in fase di esecuzione con setLocale(), e l'autocompletamento type-safe completo tramite il file i1n.d.ts generato — non è necessaria alcuna libreria i18n esterna.

Modalità Bridge con i18next

Se il tuo progetto utilizza i18next, collegalo con una riga: registerI1n((key, params) => i18next.t(key, params)). La funzione t() di i1n ora delega a i18next sotto il cofano, ma con controllo rigoroso dei tipi e autocompletamento.

Per i progetti che utilizzano react-intl (FormatJS), usa: registerI1n((key, params) => intl.formatMessage({ id: key }, params)). La modalità Bridge funziona con qualsiasi funzione di traduzione: passa qualsiasi callback (key, params) => string a registerI1n().

Distribuzione

Aggiungi i1n pull al tuo passaggio di build o alla pipeline CI/CD. I file di traduzione generati e i1n.d.ts vengono sottoposti a commit nel tuo repository.

Funziona con Vite, Create React App, Remix e qualsiasi framework basato su 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))

Correlato

Cruscotto

Guida alla dashboard web di i1n: creazione account, organizzazioni, chiavi API, modifica traduzioni e gestione del team.

Modalità Bridge

Mantieni la tua libreria i18n esistente aggiungendo l'autocompletamento type-safe, la traduzione AI e la gestione dei file di i1n.