React Intl je popularna biblioteka koja pruža skup komponenti i alata za internacionalizaciju React aplikacija. Internacionalizacija, često skraćena kao i18n, predstavlja proces prilagođavanja aplikacije različitim jezicima i kulturama.
Uz pomoć ReactIntl, možete jednostavno implementirati podršku za više jezika i regionalnih podešavanja u vašoj React aplikaciji.
Instalacija React Intl
Da biste koristili React Intl biblioteku, najpre je morate instalirati. To možete učiniti koristeći neki od popularnih menadžera paketa: npm, yarn ili pnpm.
Za instalaciju putem npm-a, pokrenite sledeću komandu u terminalu:
npm install react-intl
Za instalaciju pomoću Yarn-a, koristite ovu komandu:
yarn add react-intl
Korišćenje React Intl biblioteke
Nakon što uspešno instalirate React Intl biblioteku, možete početi koristiti njene komponente i funkcije u vašoj aplikaciji. React Intl ima slične funkcionalnosti kao JavaScript Intl API.
Neke od ključnih komponenti koje nudi React Intl biblioteka uključuju `FormattedMessage` i `IntlProvider`.
`FormattedMessage` komponenta se koristi za prikazivanje prevedenih stringova u vašoj aplikaciji, dok `IntlProvider` komponenta obezbeđuje prevode i informacije o formatiranju za celu aplikaciju.
Pre nego što počnete koristiti `FormattedMessage` i `IntlProvider` za prevođenje vaše aplikacije, potrebno je kreirati fajl sa prevodima. Ovaj fajl sadrži sve prevode za vašu aplikaciju. Možete koristiti zasebne fajlove za svaki jezik i lokal, ili jedan fajl sa svim prevodima.
Na primer:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Ovaj primer fajla za prevode sadrži dva objekta: `messagesInFrench` i `messagesInItalian`. U stringu za pozdrav, ` {name}` je mesto rezervirano za dinamičku vrednost koja se postavlja tokom izvršavanja.
Da biste koristili prevode u vašoj aplikaciji, morate obuhvatiti korensku komponentu vaše aplikacije sa `IntlProvider` komponentom. `IntlProvider` komponenta prihvata tri props-a: `locale`, `defaultLocale` i `messages`.
`locale` prop prihvata string koji specifikuje korisnički lokal, dok `defaultLocale` određuje rezervni lokal u slučaju da korisnikov željeni lokal nije dostupan. `messages` prop prihvata objekat sa prevodima.
Primer upotrebe `IntlProvider` komponente:
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>
);
U ovom primeru, `fr` lokal, prevodi iz `messagesInFrench` i podrazumevani `en` lokal su prosleđeni `IntlProvider` komponenti.
Možete proslediti više od jednog lokala ili objekta sa prevodima, i `IntlProvider` će automatski detektovati jezik korisnikovog pretraživača i koristiti odgovarajuće prevode.
Za prikaz prevedenih stringova u aplikaciji, koristite `FormattedMessage` komponentu. `FormattedMessage` komponenta prihvata `id` prop koji odgovara ID-u poruke u objektu `messages`.
Komponenta takođe prihvata `defaultMessage` i `values` propove. `defaultMessage` prop definiše rezervnu poruku u slučaju da prevod nije dostupan za trenutni lokal, dok `values` prop pruža dinamičke vrednosti za mesta rezervirana u prevedenim porukama.
Primer:
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;
U ovom delu koda, `id` prop `FormattedMessage` komponente koristi ključ „greeting“ iz objekta `messagesInFrench`, a `values` prop zamenjuje `{name}` placeholder sa vrednošću „John“.
Formatiranje brojeva pomoću FormattedNumber komponente
React Intl takođe pruža `FormattedNumber` komponentu koju možete koristiti za formatiranje brojeva na osnovu trenutnog jezika. Ova komponenta prihvata različite props-ove za prilagođavanje formatiranja, kao što su stil, valuta i minimalni i maksimalni broj decimalnih mesta.
Nekoliko primera:
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;
Ovaj primer koristi `FormattedNumber` komponentu, kojoj se prosljeđuje `value` prop koji definiše broj koji se formatira.
Korišćenjem `style` prop-a, možete prilagoditi izgled formatiranog broja. Možete podesiti `style` na „decimal“, „percent“ ili „currency“.
Kada `style` prop podesite na „currency“, `FormattedNumber` komponenta formatira broj kao vrednost valute koristeći kod valute naveden u `currency` prop-u:
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;
U gornjem bloku koda, `FormattedNumber` komponenta formatira broj koristeći „currency“ stil i „USD“ valutu.
Takođe možete formatirati brojeve sa određenim brojem decimalnih mesta koristeći propove `minimumFractionDigits` i `maximumFractionDigits`.
`minimumFractionDigits` prop definiše minimalni broj decimalnih cifara za prikaz. S druge strane, `maximumFractionDigits` prop definiše maksimalni broj decimalnih cifara.
Ako broj ima manje decimalnih cifara od specificiranih minimalnih cifara, React Intl će ga dopuniti nulama. Ako broj ima više decimalnih cifara od navedenog `maximumFractionDigits`, biblioteka će zaokružiti broj.
Primer upotrebe ovih propova:
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;
Formatiranje datuma pomoću FormattedDate komponente
Možete formatirati datume na način koji je konzistentan i lako čitljiv koristeći React Intl. `FormattedDate` komponenta pruža jednostavan i efikasan način za formatiranje datuma. Radi slično kao biblioteke za datume i vreme koje formatiraju datume, kao što je Moment.js.
`FormattedDate` komponenta prihvata različite prop-ove, kao što su `value`, `day`, `month` i `year`. `value` prop prihvata datum koji želite formatirati, a ostali prop-ovi konfiguriraju njegovo formatiranje.
Na primer:
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;
U ovom primeru, `value` prop koristi trenutni datum. Takođe, koristeći `day`, `month` i `year` prop-ove, navodite da se godina, mesec i dan prikazuju u dugom formatu.
Pored `day`, `month` i `year`, drugi prop-ovi takođe formatiraju izgled datuma. Evo prop-ova i vrednosti koje prihvataju:
- godina: „numeric“, „2-digit“
- mesec: „numeric“, „2-digit“, „narrow“, „short“, „long“
- dan: „numeric“, „2-digit“
- sat: „numeric“, „2-digit“
- minut: „numeric“, „2-digit“
- sekund: „numeric“, „2-digit“
- timeZoneName: „short“, „long“
Takođe možete koristiti `FormattedDate` komponentu za formatiranje i prikaz vremena:
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;
Internacionalizujte vaše React aplikacije za širu publiku
Naučili ste kako instalirati i konfigurirati React-Intl biblioteku u vašoj React aplikaciji. React-intl olakšava formatiranje brojeva, datuma i valuta vaše React aplikacije. Možete formatirati podatke na osnovu korisničkog lokala koristeći `FormattedMessage`, `FormattedNumber` i `FormattedDate` komponente.
React programeri često prave greške koje mogu dovesti do ozbiljnih posledica. Na primer, neuspešno ažuriranje stanja. Važno je da budete svesni ovih uobičajenih grešaka i da ih ispravite rano kako biste izbegli skupe probleme.