Vai al contenuto
React i18n

React i18n reso semplice

Internazionalizzazione type-safe per applicazioni React con hook, context e distribuzione CDN senza interruzioni.

Get started in 3 steps

1

Install

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

terminal
npm install @better-i18n/use-intl use-intl
2

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

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

Funzionalità

API React Hooks (useTranslations)
Supporto completo TypeScript con completamento automatico
Lazy loading per dimensione bundle ottimale
Formato messaggi ICU con plurali
Interpolazione variabili e formattazione
React Context per la gestione della lingua
Supporto SSR e SSG
Hot reload durante lo sviluppo
Integrazione DevTools

Installation & Setup

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

# 1. Install
npm install @better-i18n/use-intl

# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'

function App() {
  return (
    <BetterI18nProvider project="org/project" locale="en">
      <YourApp />
    </BetterI18nProvider>
  )
}

# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'

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

Funziona con le librerie i18n React più diffuse

Better i18n non sostituisce la tua libreria i18n preferita: è il layer di gestione traduzioni che le rende ancora più potenti.

Better i18n + react-intl

La libreria i18n per React più popolare con supporto al formato messaggi ICU. Usata da migliaia di app in produzione.

Better i18n sincronizza le tue traduzioni direttamente nel formato JSON di react-intl. Modifica nella dashboard e vedi subito i cambiamenti nell'app.

Better i18n + react-i18next

Potente framework i18n per React basato su i18next. Funzionalità integrate come namespace, interpolazione e plurali.

Esporta JSON compatibile con i18next e namespace. Better i18n gestisce il workflow di traduzione, i18next gestisce il runtime.

Better i18n + FormatJS

Una suite di librerie per l'internazionalizzazione che include react-intl. Supporta la sintassi ICU Message e i dati CLDR.

Better i18n supporta nativamente il formato messaggi ICU. Gestisci plurali e selezioni complesse in modo visuale, esporta nel formato FormatJS.

Better i18n + Lingui

Una libreria i18n leggibile, automatizzata e ottimizzata. Ottima DX con estrazione messaggi basata su macro.

Estrai i messaggi con Lingui CLI, gestisci le traduzioni in Better i18n e sincronizza automaticamente tramite integrazione GitHub.

Avvio rapido

Inizia con Better i18n nella tua app React in pochi minuti.

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

Inizia a sviluppare con React i18n

Piano gratuito disponibile. Nessuna carta di credito richiesta.