React

Integre o i1n com o React usando o SDK i1n ou o Modo Bridge com i18next / react-intl.

Configuração

Execute i1n init em seu projeto React. A CLI detecta automaticamente react-i18next ou i18next, se presentes, e configura o formato JSON aninhado.

Você pode usar o SDK i1n no modo autônomo (substituindo o i18next inteiramente) ou conectá-lo via Modo Bridge para manter sua biblioteca existente.

Modo Independente

Use o padrão de provedor i1n React para uma experiência plug-and-play. Inicialize com init(), crie um I1nProvider que sincronize o estado de localidade com o SDK e use o hook useI1n() em seus componentes.

Essa abordagem oferece seleção de localidade persistente via localStorage, troca de idioma em tempo de execução com setLocale() e preenchimento automático totalmente seguro em termos de tipo via o arquivo i1n.d.ts gerado — nenhuma biblioteca i18n externa é necessária.

Modo Bridge com i18next

Se seu projeto usa i18next, conecte-o com uma linha: registerI1n((key, params) => i18next.t(key, params)). A função t() do i1n agora delega para o i18next internamente, mas com verificação rigorosa de tipos e autocompletar.

Para projetos que usam react-intl (FormatJS), use: registerI1n((key, params) => intl.formatMessage({ id: key }, params)). O Modo Bridge funciona com qualquer função de tradução — passe qualquer callback (key, params) => string para registerI1n().

Implantação

Adicione o i1n pull à sua etapa de build ou pipeline de CI/CD. Os arquivos de tradução gerados e o i1n.d.ts são commitados em seu repositório.

Funciona com Vite, Create React App, Remix e qualquer framework baseado em 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

Painel

Guia para o painel web i1n: criação de conta, organizações, chaves de API, edição de tradução e gerenciamento de equipe.

Modo Bridge

Mantenha sua biblioteca i18n existente enquanto adiciona o preenchimento automático, tradução por IA e gerenciamento de arquivos com segurança de tipo do i1n.