React Intl è una libreria popolare che fornisce una serie di componenti e utilità per internazionalizzare le applicazioni React. L’internazionalizzazione, nota anche come i18n, è il processo di adattamento di un’applicazione a lingue e culture diverse.
Puoi facilmente supportare più lingue e locali nella tua applicazione React con ReactIntl.
Sommario:
Installare React Intl
Per utilizzare la libreria React Intl, devi prima installarla. Puoi farlo con più di un gestore di pacchetti: npm, yarn o pnpm.
Per installarlo con npm, esegui questo comando nel tuo terminale:
npm install react-intl
Per installarlo usando il filato, esegui questo comando:
yarn add react-intl
Come utilizzare la libreria React Intl
Dopo aver installato la libreria React Intl, puoi utilizzare i suoi componenti e le sue funzionalità nella tua applicazione. React Intl ha funzioni simili all’API JavaScript Intl.
Alcuni preziosi componenti offerti dalla libreria React Intl includono i componenti FormattedMessage e IntlProvider.
Il componente FormattedMessage visualizza le stringhe tradotte nell’applicazione, mentre il componente IntlProvider fornisce le traduzioni e le informazioni di formattazione all’applicazione.
È necessario creare un file di traduzione prima di poter iniziare a utilizzare i componenti FormattedMessage e IntlProvider per tradurre l’applicazione. Un file di traduzione contiene tutte le traduzioni per la tua applicazione. È possibile creare file separati per ogni lingua e locale o utilizzare un singolo file per contenere tutte le traduzioni.
Per esempio:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Questo file di traduzione di esempio contiene due oggetti di traduzione: messagesInFrench e messagesInItalian. È possibile sostituire il segnaposto {nome} nella stringa di saluto in fase di esecuzione con un valore dinamico.
Per utilizzare le traduzioni nella tua applicazione, devi avvolgere il componente root della tua applicazione con il componente IntlProvider. Il componente IntlProvider accetta tre oggetti di scena di React: locale, defaultLocale e messaggi.
La prop locale accetta una stringa che specifica la locale dell’utente, mentre defaultLocale specifica un fallback se la locale preferita dell’utente non è disponibile. Infine, il prop dei messaggi accetta un oggetto di traduzione.
Ecco un esempio che mostra come puoi utilizzare IntlProvider:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
<App />
</IntlProvider>
</React.StrictMode>
);
Questo esempio passa la locale fr, la traduzione messagesInFrench e una locale en predefinita al componente IntlProvider.
Puoi passare più di un oggetto locale o di traduzione e IntlProvider rileverà automaticamente la lingua del browser dell’utente e utilizzerà le traduzioni appropriate.
Per visualizzare le stringhe tradotte nella tua applicazione, utilizza il componente FormattedMessage. Il componente FormattedMessage accetta un id prop corrispondente a un ID messaggio nell’oggetto messaggi.
Il componente accetta anche un defaultMessage e valori prop. La prop defaultMessage specifica un messaggio di fallback se una traduzione non è disponibile per la locale corrente, mentre la prop values fornisce valori dinamici per i segnaposto nei messaggi tradotti.
Per esempio:
import React from "react";
import { FormattedMessage } from "react-intl";function App() {
return (
<div>
<p>
<FormattedMessage
id="greeting"
defaultMessage="Good morning {name}"
values={{ name: 'John'}}
/>
</p>
</div>
);
}export default App;
In questo blocco di codice, la prop id del componente FormattedMessage utilizza la chiave di saluto dall’oggetto messagesInFrench e la prop values sostituisce il segnaposto {name} con il valore “John”.
Formattazione dei numeri con il componente FormattedNumber
React Intl fornisce anche il componente FormattedNumber che puoi utilizzare per formattare i numeri in base alla locale corrente. Il componente accetta vari oggetti di scena per personalizzare la formattazione, come stile, valuta e cifre decimali minime e massime.
Ecco alcuni esempi:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
Decimal: <FormattedNumber value={123.456} style="decimal" />
</p>
<p>
Percent: <FormattedNumber value={123.456} style="percent" />
</p>
</div>
);
}export default App;
Questo esempio utilizza il componente FormattedNumber che accetta un valore prop che specifica il numero che si desidera formattare.
Utilizzando l’oggetto di stile, puoi personalizzare l’aspetto del numero formattato. Puoi impostare lo stile prop su decimale, percentuale o valuta.
Quando imposti l’oggetto di stile su currency, il componente FormattedNumber formatta il numero come valore di valuta utilizzando il codice specificato nell’oggetto di valuta:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
</p>
</div>
);
}export default App;
Il componente FormattedNumber formatta il numero nel blocco di codice precedente utilizzando lo stile di valuta e il codice di valuta USD.
Puoi anche formattare i numeri con un numero specifico di posizioni decimali utilizzando le props minimumFractionDigits e maximumFractionDigits.
La prop minimumFractionDigits specifica il numero minimo di cifre decimali da visualizzare. Al contrario, la prop maximumFractionDigits specifica il numero massimo di cifre decimali.
Se un numero ha meno cifre decimali rispetto al minimo specificatoFractionDigits, React Intl lo riempirà di zeri. Se il numero ha più cifre frazionarie rispetto al massimoFractionDigits specificato, la libreria arrotonderà il numero per eccesso.
Ecco un esempio che mostra come puoi usare questi oggetti di scena:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
<FormattedNumber
value={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}export default App;
Formattazione delle date con il componente FormattedDate
Puoi formattare le date in modo coerente e facile da leggere utilizzando React Intl. Il componente FormattedDate fornisce un modo semplice ed efficace per formattare le date. Funziona in modo simile alle librerie data-ora che formattano le date, come Moment.js.
Il componente FormattedDate accetta molti oggetti di scena, come valore, giorno, mese e anno. Il valore prop accetta la data che vuoi formattare e gli altri oggetti di scena ne configurano la formattazione.
Per esempio:
import React from "react";
import { FormattedDate } from "react-intl";function App() {
const today = new Date();return (
<div>
<p>
Today's date is
<FormattedDate
value={today}
day="numeric"
month="long"
year="numeric"
/>
</p>
</div>
);
}export default App;
In questo esempio, il valore prop utilizza la data corrente. Inoltre, utilizzando le props giorno, mese e anno, specifichi che desideri che l’anno, il mese e il giorno vengano visualizzati in un formato esteso.
Oltre a giorno, mese e anno, anche altri oggetti di scena formattano l’aspetto della data. Ecco gli oggetti di scena e i valori che accettano:
- anno: “numerico”, “2 cifre”
- mese: “numerico”, “2 cifre”, “stretto”, “breve”, “lungo”
- giorno: “numerico”, “2 cifre”
- ora: “numerico”, “2 cifre”
- minuto: “numerico”, “2 cifre”
- secondo: “numerico”, “2 cifre”
- timeZoneName: “breve”, “lungo”
Puoi anche utilizzare il componente FormattedDate per formattare e visualizzare l’ora:
import React from "react";
import { FormattedDate } from "react-intl";function App() {
const today = new Date();return (
<div>
<p>
The time is
<FormattedDate
value={today}
hour="numeric"
minute="numeric"
second="numeric"
/>
</p>
</div>
);
}export default App;
Internazionalizza le tue applicazioni React per un pubblico più ampio
Hai imparato come installare e configurare la libreria React-Intl nella tua applicazione React. React-intl semplifica la formattazione dei numeri, delle date e delle valute della tua applicazione React. È possibile formattare i dati in base alle impostazioni locali dell’utente utilizzando i componenti FormattedMessage, FormattedNumber e FormattedDate.
Gli sviluppatori di React spesso commettono errori che possono portare a gravi conseguenze. Ad esempio, non riuscendo ad aggiornare correttamente lo stato. È importante essere consapevoli di questi errori comuni e correggerli in anticipo per evitare problemi costosi.