Hur man använder React Intl för att internationalisera dina React-applikationer

React Intl är ett populärt bibliotek som tillhandahåller en uppsättning komponenter och verktyg för att internationalisera React-applikationer. Internationalisering, även känd som i18n, är processen att anpassa en applikation till olika språk och kulturer.

Du kan enkelt stödja flera språk och språk i din React-applikation med ReactIntl.

Installerar React Intl

För att använda React Intl-biblioteket måste du först installera det. Du kan göra detta med mer än en pakethanterare: npm, yarn eller pnpm.

För att installera det med npm, kör det här kommandot i din terminal:

 npm install react-intl

För att installera det med garn, kör det här kommandot:

 yarn add react-intl

Hur man använder React Intl-biblioteket

När du har installerat React Intl-biblioteket kan du använda dess komponenter och funktioner i din applikation. React Intl har liknande funktioner som JavaScript Intl API.

Några värdefulla komponenter som erbjuds av React Intl-biblioteket inkluderar komponenterna FormattedMessage och IntlProvider.

Komponenten FormattedMessage visar översatta strängar i din applikation, medan IntlProvider-komponenten tillhandahåller översättningar och formateringsinformation till din applikation.

Du måste skapa en översättningsfil innan du kan börja använda komponenterna FormattedMessage och IntlProvider för att översätta din applikation. En översättningsfil innehåller alla översättningar för din ansökan. Du kan skapa separata filer för varje språk och lokal eller använda en enda fil för att innehålla alla översättningar.

Till exempel:

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

Denna exempelöversättningsfil innehåller två översättningsobjekt: messagesInFrench och messagesInItalian. Du kan ersätta platshållaren {name} i hälsningssträngen under körning med ett dynamiskt värde.

För att använda översättningarna i din applikation måste du slå in din applikations rotkomponent med IntlProvider-komponenten. IntlProvider-komponenten tar tre React-rekvisita: locale, defaultLocale och meddelanden.

Locale-propet accepterar en sträng som anger användarens lokalitet, medan defaultLocale anger en reserv om användarens föredragna lokalitet inte är tillgänglig. Slutligen accepterar meddelandepropen ett översättningsobjekt.

Här är ett exempel som visar hur du kan använda 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>
);

Det här exemplet skickar fr-lokalen, messagesInFrench-översättningen och en standard en locale till IntlProvider-komponenten.

Du kan skicka mer än ett språk eller översättningsobjekt, och IntlProvider kommer automatiskt att upptäcka användarens webbläsarspråk och använda lämpliga översättningar.

För att visa översatta strängar i din applikation, använd FormattedMessage-komponenten. FormattedMessage-komponenten tar en id-prop som motsvarar ett meddelande-ID i meddelandeobjektet.

Komponenten tar också ett defaultMessage och värdeprop. StandardMessage-propet anger ett reservmeddelande om en översättning inte är tillgänglig för den aktuella lokalen, medan values-propen tillhandahåller dynamiska värden för platshållarna i dina översatta meddelanden.

Till exempel:

 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 det här kodblocket använder id-propet för FormattedMessage-komponenten hälsningsnyckeln från objektet messagesInFrench, och värden prop ersätter platshållaren {name} med värdet ”John”.

Formatera nummer med komponenten FormattedNumber

React Intl tillhandahåller också FormattedNumber-komponenten som du kan använda för att formatera siffror baserat på den aktuella lokalen. Komponenten accepterar olika rekvisita för att anpassa formateringen, såsom stil, valuta och lägsta och högsta bråksiffror.

Här är några exempel:

 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;

Det här exemplet använder komponenten FormattedNumber som accepterar en värdeprop som anger talet du vill formatera.

Med hjälp av stilrekvisiten kan du anpassa utseendet på det formaterade numret. Du kan ställa in stilens rekvisita till decimal, procent eller valuta.

När du ställer in stilens rekvisita till valuta, formaterar FormattedNumber-komponenten talet som ett valutavärde med hjälp av koden som anges i valutarekvisiten:

 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;

Komponenten FormattedNumber formaterar numret i kodblocket ovan med hjälp av valutastilen och USD-valutakoden.

Du kan också formatera tal med ett visst antal decimaler med hjälp av minimumFractionDigits och maximumFractionDigits rekvisita.

MinimumFractionDigits prop anger det minsta antalet bråksiffror som ska visas. Däremot anger maximumFractionDigits-rekvisiten det maximala antalet bråksiffror.

Om ett tal har färre bråksiffror än de angivna minimumBråksiffrorna, kommer React Intl att fylla det med nollor. Om talet har fler bråksiffror än det angivna maximala bråksiffrorna, kommer biblioteket att avrunda talet uppåt.

Här är ett exempel som visar hur du kan använda dessa rekvisita:

 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;

Formatera datum med komponenten FormattedDate

Du kan formatera datum på ett sätt som är konsekvent och lätt att läsa med hjälp av React Intl. Komponenten FormattedDate ger ett enkelt och effektivt sätt att formatera datum. Det fungerar på samma sätt som datum-tid-bibliotek som formaterar datum, till exempel Moment.js.

Komponenten FormattedDate kräver många rekvisita, till exempel värde, dag, månad och år. Värdet prop accepterar datumet du vill formatera, och de andra rekvisita konfigurerar dess formatering.

Till exempel:

 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 det här exemplet använder värdet prop det aktuella datumet. Med hjälp av rekvisita för dag, månad och år anger du att du vill att år, månad och dag ska visas i ett långt format.

Förutom dag, månad och år, formaterar även andra rekvisita datumets utseende. Här är rekvisita och värderingar de accepterar:

  • år: ”numerisk”, ”2-siffrig”
  • månad: ”numerisk”, ”2-siffrig”, ”smal”, ”kort”, ”lång”
  • dag: ”numerisk”, ”2-siffrig”
  • timme: ”numerisk”, ”2-siffrig”
  • minut: ”numerisk”, ”2-siffrig”
  • andra: ”numerisk”, ”2-siffrig”
  • timeZoneName: ”kort”, ”lång”

Du kan också använda FormattedDate-komponenten för att formatera och visa 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;

Internationalisera dina React-applikationer för en bredare publik

Du lärde dig hur du installerar och ställer in React-Intl-biblioteket i din React-applikation. React-intl gör det enkelt att formatera din React-applikations nummer, datum och valutor. Du kan formatera data baserat på användarens språk med hjälp av komponenterna FormattedMessage, FormattedNumber och FormattedDate.

React-utvecklare gör ofta misstag som kan leda till allvarliga konsekvenser. Till exempel att misslyckas med att uppdatera tillståndet korrekt. Det är viktigt att vara medveten om dessa vanliga misstag och rätta till dem tidigt för att undvika kostsamma problem.