React Intl är ett omtyckt bibliotek som tillhandahåller en samling verktyg och komponenter för att göra React-applikationer internationella. Internationalisering, ofta kallat i18n, är processen att anpassa en applikation så att den kan användas på olika språk och kulturer.
Med ReactIntl kan du enkelt lägga till stöd för flera språk i din React-applikation.
Installation av React Intl
För att börja använda React Intl-biblioteket behöver du först installera det. Det finns flera pakethanterare du kan använda: npm, yarn eller pnpm.
Om du vill installera med npm, kör följande kommando i din terminal:
npm install react-intl
För att installera med yarn, kör det här kommandot istället:
yarn add react-intl
Användning av React Intl-biblioteket
När du har installerat React Intl, kan du använda dess komponenter och funktioner i din applikation. React Intl har många likheter med JavaScripts inbyggda Intl API.
Några av de viktigaste komponenterna som React Intl erbjuder är FormattedMessage och IntlProvider.
Komponenten FormattedMessage används för att visa översatta texter i applikationen, medan IntlProvider ser till att översättningar och formatinformation är tillgängliga för hela applikationen.
Innan du kan använda FormattedMessage och IntlProvider, måste du skapa en översättningsfil. En sådan fil innehåller alla översättningar som din applikation behöver. Du kan välja att skapa separata filer för varje språk eller använda en enda fil där alla översättningar finns.
Exempel:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
I det här exemplet har vi skapat två objekt med översättningar: messagesInFrench och messagesInItalian. Du kan dynamiskt ersätta platshållaren {name} med ett värde under körning.
För att använda översättningarna i din applikation, måste du kapsla in din applikations rotkomponent med komponenten IntlProvider. IntlProvider tar tre viktiga props: locale, defaultLocale och messages.
Locale-propen anger användarens språkliga inställning, medan defaultLocale ger ett reservspråk om användarens föredragna språk inte är tillgängligt. Messages-propen tar in ett objekt med översättningar.
Här följer ett exempel på hur man använder 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>
);
I det här exemplet skickar vi in språket ”fr”, översättningarna i messagesInFrench, och ”en” som standard-språk till komponenten IntlProvider.
Du kan skicka in fler än ett språk eller översättningsobjekt, och IntlProvider kommer automatiskt att upptäcka vilket språk användaren föredrar och använda motsvarande översättningar.
För att visa översatta texter i din applikation, använd komponenten FormattedMessage. Denna komponent tar en id-prop som matchar ett meddelande-ID i ditt meddelandeobjekt.
Den tar även in en defaultMessage och en values-prop. defaultMessage ger en reservtext om en översättning inte är tillgänglig för det aktuella språket, och values-propen används för att tillhandahålla dynamiska värden till platshållare i dina översatta texter.
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;
Här används id-propen för FormattedMessage-komponenten för att matcha ”greeting”-nyckeln från objektet messagesInFrench, och values-propen ersätter platshållaren {name} med ”John”.
Formatering av tal med komponenten FormattedNumber
React Intl erbjuder även FormattedNumber-komponenten, som du kan använda för att formatera siffror beroende på det aktuella språket. Komponenten tar in ett antal props för att anpassa formateringen, som stil, valuta och minsta och högsta antal decimaler.
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;
Detta exempel använder FormattedNumber-komponenten, som tar en value-prop som anger talet som ska formateras.
Med style-propen kan du anpassa utseendet på det formaterade talet. Du kan ställa in style-propen till decimal, percent eller currency.
Om du ställer in style-propen till currency, kommer FormattedNumber att formatera talet som en valuta med hjälp av koden i currency-propen:
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;
I ovanstående kodblock formaterar FormattedNumber talet med valutastilen och valutakoden ”USD”.
Du kan även formatera tal med ett specifikt antal decimaler genom att använda propsen minimumFractionDigits och maximumFractionDigits.
minimumFractionDigits-propen anger det minsta antalet decimaler som ska visas. maximumFractionDigits-propen anger det maximala antalet decimaler.
Om ett tal har färre decimaler än angivet i minimumFractionDigits, fyller React Intl i med nollor. Om talet har fler decimaler än angivet i maximumFractionDigits, avrundas talet av biblioteket.
Här är ett exempel som visar hur man kan använda dessa props:
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;
Formatering av datum med komponenten FormattedDate
Du kan använda React Intl för att formatera datum på ett enhetligt och läsbart sätt. Komponenten FormattedDate är ett smidigt och effektivt sätt att formatera datum. Den liknar hur bibliotek för datum och tid, som Moment.js, formaterar datum.
FormattedDate-komponenten tar in flera props, som value, day, month och year. Value-propen accepterar det datum du vill formatera, och de andra propsen konfigurerar hur datumet ska formateras.
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 detta exempel använder value-propen det aktuella datumet. Genom att använda propsen day, month och year specificerar du att du vill att år, månad och dag ska visas i ett långt format.
Utöver day, month och year finns även andra props som formaterar datumets utseende. Här är props och värden de accepterar:
- year: ”numeric”, ”2-digit”
- month: ”numeric”, ”2-digit”, ”narrow”, ”short”, ”long”
- day: ”numeric”, ”2-digit”
- hour: ”numeric”, ”2-digit”
- minute: ”numeric”, ”2-digit”
- second: ”numeric”, ”2-digit”
- timeZoneName: ”short”, ”long”
Du kan även använda FormattedDate 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;
Gör dina React-applikationer internationella för en bredare publik
Du har nu lärt dig hur man installerar och konfigurerar React-Intl-biblioteket i din React-applikation. React-intl gör det enkelt att formatera tal, datum och valutor i din React-applikation. Med hjälp av komponenterna FormattedMessage, FormattedNumber och FormattedDate kan du formatera data baserat på användarens språk.
React-utvecklare gör ofta misstag som kan leda till allvarliga konsekvenser, till exempel att misslyckas med att uppdatera state korrekt. Det är viktigt att vara medveten om dessa vanliga misstag och rätta till dem tidigt för att undvika kostsamma problem.