Slik bruker du React Intl for å internasjonalisere React-applikasjonene dine

React Intl er et populært bibliotek som tilbyr et sett med komponenter og verktøy for å internasjonalisere React-applikasjoner. Internasjonalisering, også kjent som i18n, er prosessen med å tilpasse en applikasjon til ulike språk og kulturer.

Du kan enkelt støtte flere språk og lokaliteter i React-applikasjonen din med ReactIntl.

Installerer React Intl

For å bruke React Intl-biblioteket må du først installere det. Du kan gjøre dette med mer enn én pakkebehandler: npm, garn eller pnpm.

For å installere den med npm, kjør denne kommandoen i terminalen din:

npm installer react-intl

For å installere den ved hjelp av garn, kjør denne kommandoen:

garn add react-intl

Slik bruker du React Intl-biblioteket

Når du har installert React Intl-biblioteket, kan du bruke komponentene og funksjonene i applikasjonen din. React Intl har lignende funksjoner som JavaScript Intl API.

Noen verdifulle komponenter som tilbys av React Intl-biblioteket inkluderer Formatert melding og IntlProvider komponenter.

FormattedMessage-komponenten viser oversatte strenger i applikasjonen din, mens IntlProvider-komponenten gir oversettelser og formateringsinformasjon til applikasjonen.

Du må opprette en oversettelsesfil før du kan begynne å bruke FormattedMessage- og IntlProvider-komponentene til å oversette applikasjonen. En oversettelsesfil inneholder alle oversettelsene for søknaden din. Du kan opprette separate filer for hvert språk og lokalitet eller bruke en enkelt fil for å inneholde alle oversettelsene.

For eksempel:

eksportkonst messagesInFrench = {
 hilsen: «Bonjour {navn}»
}

eksportkonst messagesInItalian = {
 hilsen: "Buongiorno {navn}"
}

Denne eksempeloversettelsesfilen inneholder to oversettelsesobjekter: meldinger på fransk og meldinger på italiensk. Du kan erstatte plassholderen {Navn} i hilsen streng ved kjøring med en dynamisk verdi.

For å bruke oversettelsene i applikasjonen din, må du pakke applikasjonens rotkomponent med IntlProvider komponent. IntlProvider-komponenten tar tre Reager rekvisitter: lokalitet, defaultLocale, og meldinger.

Locale prop godtar en streng som spesifiserer brukerens lokalitet, mens standardLocale spesifiserer en reserve hvis brukerens foretrukne lokalitet ikke er tilgjengelig. Til slutt aksepterer meldingsrekvisitten et oversettelsesobjekt.

Her er et eksempel som viser hvordan du kan bruke IntlProvider:

import Reagere fra"reagere";
import ReactDOM fra"reager-dom/klient";
import App fra"./App";
import { IntlProvider } fra"reager-intl";
import { messagesInFrench } fra"./oversettelse";
ReactDOM.createRoot(dokument.getElementById("rot")).render(

"fr" messages={messagesInFrench} defaultLocale="no">

 </IntlProvider>
 </React.StrictMode>
);

Dette eksemplet passerer fr lokalitet, den meldinger på fransk oversettelse og en standard no lokalitet til IntlProvider komponent.

Du kan sende mer enn ett lokalitet eller oversettelsesobjekt, og IntlProvider vil automatisk oppdage brukerens nettleserspråk og bruke de riktige oversettelsene.

For å vise oversatte strenger i applikasjonen din, bruk Formatert melding komponent. De Formatert melding komponent tar en id prop som tilsvarer en meldings-ID i meldingsobjektet.

Komponenten tar også en defaultMessage og verdier rekvisitt. De defaultMessage prop spesifiserer en reservemelding hvis en oversettelse er utilgjengelig for gjeldende lokalitet, mens verdier prop gir dynamiske verdier for plassholderne i de oversatte meldingene dine.

For eksempel:

import Reagere fra"reagere";
import { FormattedMessage } fra"reager-intl";
funksjonApp() {
komme tilbake (




 id="hilsen"
 defaultMessage="God morgen {name}"
 verdier={{ Navn: 'John'}}
 />
 </p>
 </div>
 );
}
eksportmisligholde App;

I denne kodeblokken er id rekvisitt av Formatert melding komponenten bruker hilsen nøkkel fra meldinger på fransk objekt, og verdier prop erstatter {Navn} plassholder med verdien "John".

Formatere tall med FormattedNumber-komponenten

React Intl tilbyr også Formatert nummer komponent som du kan bruke til å formatere tall basert på gjeldende lokalitet. Komponenten godtar ulike rekvisitter for å tilpasse formateringen, for eksempel stil, valuta og minimums- og maksimumsbrøksiffer.

Her er noen eksempler:

import Reagere fra"reagere";
import { FormattedNumber } fra"reager-intl";
funksjonApp() {
komme tilbake (




 Desimal: <Formatert nummerverdi={123.456}stil="desimal" />
 </p>


 Prosent: <Formatert nummerverdi={123.456}stil="prosent" />
 </p>
 </div>
 );
}
eksportmisligholde App;

Dette eksemplet bruker Formatert nummer komponent som godtar en verdi prop som spesifiserer tallet du vil formatere.

Bruker stil prop, kan du tilpasse utseendet til det formaterte tallet. Du kan stille inn stil støtte til desimal, prosent, eller valuta.

Når du stiller inn stil støtte til valuta, den Formatert nummer komponent formaterer tallet som en valutaverdi ved å bruke koden spesifisert i valuta rekvisitt:

import Reagere fra"reagere";
import { FormattedNumber } fra"reager-intl";
funksjonApp() {
komme tilbake (




 Pris: <Formatert nummerverdi={123.456}stil="valuta"valuta="USD" />
 </p>
 </div>
 );
}
eksportmisligholde App;

De Formatert nummer komponent formaterer nummeret i kodeblokken ovenfor ved å bruke valuta stilen og USD valutakode.

Du kan også formatere tall med et bestemt antall desimaler ved å bruke minimumFraction Digits og maximumFraction Digits Rekvisitter.

De minimumFraction Digits prop angir minimum antall brøksifre som skal vises. I motsetning til dette maximumFraction Digits prop angir maksimalt antall brøksiffer.

Hvis et tall har færre brøksiffer enn det spesifiserte minimumFraction Digits, React Intl vil fylle den med nuller. Hvis tallet har flere brøksiffer enn det spesifiserte maximumFraction Digits, vil biblioteket runde nummeret opp.

Her er et eksempel som viser hvordan du kan bruke disse rekvisittene:

import Reagere fra"reagere";
import { FormattedNumber } fra"reager-intl";
funksjonApp() {
komme tilbake (




 verdi={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
eksportmisligholde App;

Formatere datoer med FormattedDate-komponenten

Du kan formatere datoer på en måte som er konsistent og lett å lese ved å bruke React Intl. De Formatert dato komponent gir en enkel og effektiv måte å formatere datoer på. Det fungerer på samme måte som dato-tid-biblioteker som formaterer datoer, for eksempel Moment.js.

FormattedDate-komponenten tar mange rekvisitter, som f.eks verdi, dag, måned, og år. Verdipropen godtar datoen du vil formatere, og de andre rekvisittene konfigurerer formateringen.

For eksempel:

import Reagere fra"reagere";
import { FormattedDate } fra"reager-intl";
funksjonApp() {
konst i dag = nyDato();
komme tilbake (




 I dagdatoen er
 verdi={i dag}
 dag="numerisk"
 måned="lang"
 år="numerisk"
 />
 </p>
 </div>
 );
}
eksportmisligholde App;

I dette eksemplet er verdi prop bruker gjeldende dato. Også ved å bruke dag, måned, og år rekvisitter, angir du at du vil at år, måned og dag skal vises i et langt format.

Ved siden av dag, måned og år, formaterer også andre rekvisitter datoens utseende. Her er rekvisittene og verdiene de godtar:

• år: "numerisk", "2-sifret"
• måned: "numerisk", "2-sifret", "smal", "kort", "lang"
• dag: "numerisk", "2-sifret"
• time: "numerisk", "2-sifret"
• minutt: "numerisk", "2-sifret"
• sekund: "numerisk", "2-sifret"
• tidssonenavn: "kort lang"

Du kan også bruke Formatert dato komponent for å formatere og vise tid:

import Reagere fra"reagere";
import { FormattedDate } fra"reager-intl";
funksjonApp() {
konst i dag = nyDato();
komme tilbake (




 Klokka er
 verdi={i dag}
 time="numerisk"
 minutt="numerisk"
 andre="numerisk"
 />
 </p>
 </div>
 );
}
eksportmisligholde App;

Internasjonaliser React-applikasjonene dine for et bredere publikum

Du lærte hvordan du installerer og konfigurerer React-Intl-biblioteket i React-applikasjonen din. React-intl gjør det enkelt å formatere React-applikasjonens tall, datoer og valutaer. Du kan formatere data basert på brukerens lokalitet ved å bruke komponentene FormattedMessage, FormattedNumber og FormattedDate.

React-utviklere gjør ofte feil som kan føre til alvorlige konsekvenser. For eksempel unnlatelse av å oppdatere tilstanden riktig. Det er viktig å være klar over disse vanlige feilene og rette dem tidlig for å unngå kostbare problemer.