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

0 Shares

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.

Innholdsfortegnelse

Installerer React Intl

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

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

 npm install react-intl

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

 yarn 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 FormattedMessage- og IntlProvider-komponentene.

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:

 export const messagesInFrench = {
    greeting: "Bonjour {name}"
}
  
export const messagesInItalian = {
    greeting: "Buongiorno {name}"
}

Denne eksempeloversettelsesfilen inneholder to oversettelsesobjekter: messagesInFrench og messagesInItalian. Du kan erstatte plassholderen {navn} i hilsenstrengen under kjøring med en dynamisk verdi.

Hvordan legge til signatur i et Word-dokument?

For å bruke oversettelsene i applikasjonen din, må du pakke inn applikasjonens rotkomponent med IntlProvider-komponenten. IntlProvider-komponenten tar tre React-rekvisitter: locale, 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 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>
);

Dette eksemplet overfører fr locale, messagesInFrench-oversettelsen og en standard en locale til IntlProvider-komponenten.

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 FormattedMessage-komponenten. FormattedMessage-komponenten tar en id-prop som tilsvarer en meldings-ID i meldingsobjektet.

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

For eksempel:

 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;

I denne kodeblokken bruker id-propp for FormattedMessage-komponenten hilsennøkkelen fra messagesInFrench-objektet, og values prop erstatter plassholderen {name} med verdien «John».

Formatere tall med FormattedNumber-komponenten

React Intl tilbyr også FormattedNumber-komponenten 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.

9 Markedsføringsplanmaler og generator for SMB

Her er noen eksempler:

 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;

Dette eksemplet bruker FormattedNumber-komponenten som godtar en verdipropp som spesifiserer tallet du vil formatere.

Ved å bruke stilrekvisitten kan du tilpasse utseendet til det formaterte tallet. Du kan angi stilrekvisitten til desimal, prosent eller valuta.

Når du setter stilrekvisitten til valuta, formaterer FormattedNumber-komponenten tallet som en valutaverdi ved å bruke koden spesifisert i valutarekvisitten:

 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;

FormattedNumber-komponenten formaterer tallet i kodeblokken ovenfor ved å bruke valutastilen og USD-valutakoden.

Du kan også formatere tall med et spesifikt antall desimaler ved å bruke minimumFractionDigits og maximumFractionDigits rekvisitter.

MinimumFractionDigits prop spesifiserer minimum antall brøksifre som skal vises. I motsetning til dette spesifiserer maximumFractionDigits-proppet det maksimale antallet brøksiffer.

Hvis et tall har færre brøksifre enn det spesifiserte minimumFractionDigits, vil React Intl fylle det med nuller. Hvis tallet har flere brøksiffer enn det angitte maksimumBrøksifferet, vil biblioteket runde tallet opp.

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

 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 måte som er konsistent og lett å lese ved å bruke React Intl. FormattedDate-komponenten 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.

Slik gjør du et bilde uskarpt på iPhone

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

For eksempel:

 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;

I dette eksemplet bruker verdirekvisitten gjeldende dato. Ved å bruke dag-, måned- og årrekvisittene spesifiserer du også at du vil at året, måneden og dagen 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»
andre: «numerisk», «2-sifret»
timeZoneName: «kort», «lang»

Du kan også bruke FormattedDate-komponenten til å formatere og vise tid:

 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;

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 på riktig måte. Det er viktig å være klar over disse vanlige feilene og rette dem tidlig for å unngå kostbare problemer.