React Intl er et velkjent bibliotek som tilbyr en samling komponenter og verktøy for å gjøre React-applikasjoner internasjonale. Internasjonalisering, ofte forkortet til i18n, handler om å tilpasse en applikasjon for ulike språk og kulturer.
Med React Intl kan du enkelt integrere støtte for flere språk og steder i din React-applikasjon.
Installere React Intl
For å ta i bruk React Intl-biblioteket, må du først installere det. Dette kan gjøres via flere pakkebehandlere: npm, yarn eller pnpm.
For å installere ved hjelp av npm, bruk denne kommandoen i terminalen din:
npm install react-intl
For installasjon med yarn, bruk følgende kommando:
yarn add react-intl
Hvordan bruke React Intl-biblioteket
Etter at du har installert React Intl, kan du begynne å bruke bibliotekets komponenter og funksjoner i applikasjonen din. React Intl har mange likhetstrekk med JavaScript Intl API.
Noen av de mest nyttige komponentene som tilbys av React Intl, inkluderer FormattedMessage- og IntlProvider-komponentene.
FormattedMessage-komponenten sørger for visning av oversatte tekster i applikasjonen din, mens IntlProvider-komponenten leverer oversettelser og formateringsdata til applikasjonen.
Før du kan bruke FormattedMessage- og IntlProvider-komponentene for å oversette applikasjonen din, må du lage en oversettelsesfil. Denne filen inneholder alle oversettelsene for applikasjonen. Du kan velge å lage separate filer for hvert språk og sted, eller å samle alle oversettelsene i én enkelt fil.
Et eksempel:
export const meldingerPåFransk = {
hilsen: "Bonjour {navn}"
}
export const meldingerPåItaliensk = {
hilsen: "Buongiorno {navn}"
}
Dette eksemplet på en oversettelsesfil viser to oversettelsesobjekter: `meldingerPåFransk` og `meldingerPåItaliensk`. Plassholderen `{navn}` i hilsenen kan erstattes med en dynamisk verdi under kjøring.
For å bruke oversettelsene i applikasjonen, må du omkranse rotkomponenten i applikasjonen med IntlProvider-komponenten. IntlProvider-komponenten tar inn tre React-props: `locale`, `defaultLocale` og `meldinger`.
Prop’en `locale` tar en streng som angir brukerens lokale, mens `defaultLocale` spesifiserer en fallback om brukerens foretrukne språk ikke er tilgjengelig. Til slutt godtar prop’en `meldinger` et oversettelsesobjekt.
Her er et eksempel på hvordan du kan bruke IntlProvider:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { meldingerPåFransk } from "./oversettelser";ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<IntlProvider locale="fr" messages={meldingerPåFransk} defaultLocale="no">
<App />
</IntlProvider>
</React.StrictMode>
);
Dette eksemplet sender det franske språket, oversettelsene i `meldingerPåFransk` og et standard `locale` til IntlProvider-komponenten.
Du kan sende flere lokale eller oversettelsesobjekter, og IntlProvider vil automatisk oppdage brukerens nettleserspråk og bruke de korrekte oversettelsene.
For å vise oversatte strenger i applikasjonen, bruker du FormattedMessage-komponenten. FormattedMessage-komponenten tar en `id`-prop som tilsvarer en meldings-ID i meldingsobjektet.
Komponenten godtar også en `defaultMessage` og en `values`-prop. `defaultMessage`-prop’en angir en fallback-melding hvis en oversettelse ikke finnes for det aktuelle språket, mens `values`-prop’en leverer dynamiske verdier for plassholderne i de oversatte meldingene.
For eksempel:
import React from "react";
import { FormattedMessage } from "react-intl";function App() {
return (
<div>
<p>
<FormattedMessage
id="hilsen"
defaultMessage="God morgen {navn}"
values={{ name: 'Ola'}}
/>
</p>
</div>
);
}export default App;
I denne kodeblokken bruker `id`-proppen for FormattedMessage-komponenten hilsen-nøkkelen fra `meldingerPåFransk`-objektet, og `values`-proppen erstatter plassholderen `{navn}` med verdien «Ola».
Formatere tall med FormattedNumber-komponenten
React Intl tilbyr også FormattedNumber-komponenten, som du kan bruke til å formatere tall basert på gjeldende lokale. Komponenten godtar ulike props for å tilpasse formateringen, som stil, valuta og minimums- og maksimums brøkdeler.
Noen eksempler:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
Desimal: <FormattedNumber value={123.456} style="decimal" />
</p>
<p>
Prosent: <FormattedNumber value={123.456} style="percent" />
</p>
</div>
);
}export default App;
Dette eksemplet bruker FormattedNumber-komponenten, som godtar en `value`-prop som spesifiserer tallet du vil formatere.
Med `style`-proppen kan du tilpasse utseendet til det formaterte tallet. Du kan sette `style`-proppen til `desimal`, `prosent` eller `valuta`.
Når du setter `style`-proppen til `valuta`, formaterer FormattedNumber-komponenten tallet som en valutaverdi, med koden som er angitt i `currency`-proppen:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
Pris: <FormattedNumber value={123.456} style="currency" currency="USD" />
</p>
</div>
);
}export default App;
FormattedNumber-komponenten formaterer tallet i kodeblokken ovenfor med valutastilen og USD-valutakoden.
Du kan også formatere tall med et spesifikt antall desimaler ved hjelp av prop’ene `minimumFractionDigits` og `maximumFractionDigits`.
`minimumFractionDigits`-prop’en angir minimum antall desimaler som skal vises. I motsetning til dette angir `maximumFractionDigits`-proppen det maksimale antallet desimaler.
Hvis et tall har færre desimaler enn det angitte minimumet, vil React Intl fylle det med nuller. Hvis tallet har flere desimaler enn det angitte maksimumet, vil biblioteket runde tallet opp.
Her er et eksempel på hvordan du kan bruke disse prop’ene:
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;
Formatere datoer med FormattedDate-komponenten
Du kan formatere datoer på en konsistent og lettlest måte ved hjelp av React Intl. FormattedDate-komponenten tilbyr en enkel og effektiv måte å formatere datoer på. Den ligner på dato- og tidsbiblioteker som formaterer datoer, for eksempel Moment.js.
FormattedDate-komponenten godtar mange props, som `value`, `day`, `month` og `year`. `Value`-proppen godtar datoen du vil formatere, og de andre prop’ene konfigurerer selve formateringen.
Et eksempel:
import React from "react";
import { FormattedDate } from "react-intl";function App() {
const iDag = new Date();return (
<div>
<p>
Dagens dato er
<FormattedDate
value={iDag}
day="numeric"
month="long"
year="numeric"
/>
</p>
</div>
);
}export default App;
I dette eksemplet bruker `value`-proppen den gjeldende datoen. Ved å bruke `day`, `month` og `year` spesifiserer du at du ønsker at år, måned og dag skal vises i et langt format.
I tillegg til `day`, `month` og `year` finnes det også andre props som formaterer datoens utseende. Her er en oversikt over de forskjellige prop’ene og verdiene de godtar:
- år: «numeric», «2-digit»
- måned: «numeric», «2-digit», «narrow», «short», «long»
- dag: «numeric», «2-digit»
- time: «numeric», «2-digit»
- minutt: «numeric», «2-digit»
- sekund: «numeric», «2-digit»
- timeZoneName: «short», «long»
Du kan også bruke FormattedDate-komponenten for å formatere og vise tid:
import React from "react";
import { FormattedDate } from "react-intl";function App() {
const iDag = new Date();return (
<div>
<p>
Klokken er
<FormattedDate
value={iDag}
hour="numeric"
minute="numeric"
second="numeric"
/>
</p>
</div>
);
}export default App;
Gjør React-applikasjonene dine internasjonale for et bredere publikum
Du har nå lært hvordan du installerer og konfigurerer React Intl-biblioteket i React-applikasjonen din. React Intl gjør det enkelt å formatere tall, datoer og valutaer i React-applikasjonen. Du kan formatere data basert på brukerens lokale ved hjelp av komponentene FormattedMessage, FormattedNumber og FormattedDate.
React-utviklere gjør ofte feil som kan ha alvorlige konsekvenser. For eksempel kan det føre til problemer om tilstanden ikke oppdateres på korrekt måte. Det er viktig å være klar over disse vanlige feilene og rette dem tidlig for å unngå kostbare problemer.