Реацт Интл је популарна библиотека која обезбеђује скуп компоненти и услужних програма за интернационализацију Реацт апликација. Интернационализација, позната и као и18н, је процес прилагођавања апликације различитим језицима и културама.
Можете лако подржати више језика и локалитета у вашој Реацт апликацији помоћу РеацтИнтл-а.
Преглед садржаја
Инсталирање Реацт Интл
Да бисте користили Реацт Интл библиотеку, прво морате да је инсталирате. То можете да урадите са више од једног менаџера пакета: нпм, иарн или пнпм.
Да бисте га инсталирали помоћу нпм-а, покрените ову команду у свом терминалу:
npm install react-intl
Да бисте га инсталирали помоћу предива, покрените ову команду:
yarn add react-intl
Како користити Реацт Интл библиотеку
Када инсталирате Реацт Интл библиотеку, можете користити њене компоненте и функције у својој апликацији. Реацт Интл има сличне функције као ЈаваСцрипт Интл АПИ.
Неке вредне компоненте које нуди Реацт Интл библиотека укључују компоненте ФорматтедМессаге и ИнтлПровидер.
Компонента ФорматтедМессаге приказује преведене стрингове у вашој апликацији, док компонента ИнтлПровидер обезбеђује преводе и информације о форматирању вашој апликацији.
Морате креирати датотеку за превод пре него што почнете да користите компоненте ФорматтедМессаге и ИнтлПровидер за превођење ваше апликације. Датотека за превод садржи све преводе за вашу апликацију. Можете креирати засебне датотеке за сваки језик и локал или користити једну датотеку која садржи све преводе.
На пример:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Овај пример датотеке превода садржи два објекта за превођење: мессагесИнФренцх и мессагесИнИталиан. Можете да замените чувар места {наме} у стрингу поздрава током извршавања динамичком вредношћу.
Да бисте користили преводе у својој апликацији, морате обмотати коренску компоненту ваше апликације компонентом ИнтлПровидер. Компонента ИнтлПровидер узима три Реацт пропс-а: лоцале, дефаултЛоцале и поруке.
Пропис за локализацију прихвата стринг који специфицира корисников локал, док дефаултЛоцале наводи резервни ако корисников преферирани локални стандард није доступан. Коначно, подршка за поруке прихвата објекат превода.
Ево примера који показује како можете да користите ИнтлПровидер:
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>
);
Овај пример прослеђује фр локале, превод мессагесИнФренцх и подразумевани ен локал компоненти ИнтлПровидер.
Можете проследити више од једног локала или објекта за превод, а ИнтлПровидер ће аутоматски открити језик претраживача корисника и користити одговарајуће преводе.
Да бисте приказали преведене стрингове у својој апликацији, користите компоненту ФорматтедМессаге. Компонента ФорматтедМессаге узима ид проп који одговара ИД-у поруке у објекту поруке.
Компонента такође узима дефаултМессаге анд валуес проп. Пропорција дефаултМессаге наводи резервну поруку ако превод није доступан за тренутни локал, док вредности проп обезбеђује динамичке вредности за чуваре места у вашим преведеним порукама.
На пример:
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;
У овом блоку кода, ид проп компоненте ФорматтедМессаге користи поздравни кључ из објекта мессагесИнФренцх, а валуе проп замењује {наме} чувар места са вредношћу „Јохн“.
Форматирање бројева помоћу компоненте ФорматтедНумбер
Реацт Интл такође обезбеђује компоненту ФорматтедНумбер коју можете да користите за форматирање бројева на основу тренутног језика. Компонента прихвата различите реквизите за прилагођавање форматирања, као што су стил, валута и минималне и максималне цифре разломка.
Ево неколико примера:
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;
Овај пример користи компоненту ФорматтедНумбер која прихвата вредност проп која наводи број који желите да форматирате.
Користећи стилски реквизит, можете прилагодити изглед форматираног броја. Можете поставити опис стила на децимални, проценат или валуту.
Када поставите прописе за стил на валуту, компонента ФорматтедНумбер форматира број као вредност валуте користећи код наведен у валутном пропу:
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;
Компонента ФорматтедНумбер форматира број у блоку кода изнад користећи стил валуте и код валуте у УСД.
Такође можете да форматирате бројеве са одређеним бројем децималних места користећи реквизите минимумФрацтионДигитс и макимумФрацтионДигитс.
Пропис минимумФрацтионДигитс наводи минимални број цифара разломка за приказ. Насупрот томе, максимална фракцијаДигитс пропс специфицира максималан број цифара разломака.
Ако број има мање цифара разломка од специфицираних минималних цифара фракција, Реацт Интл ће га додати нулама. Ако број има више цифара разломка од наведеног максимумаФрацтионДигитс, библиотека ће заокружити број нагоре.
Ево примера који показује како можете да користите ове реквизите:
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;
Форматирање датума помоћу компоненте ФорматтедДате
Можете да форматирате датуме на начин који је доследан и лак за читање користећи Реацт Интл. Компонента ФорматтедДате пружа једноставан и ефикасан начин за форматирање датума. Ради слично као и библиотеке датума и времена које форматирају датуме, као што је Момент.јс.
Компонента ФорматтедДате узима много реквизита, као што су вредност, дан, месец и година. Вредност пропс прихвата датум који желите да форматирате, а остали реквизити конфигуришу његово форматирање.
На пример:
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;
У овом примеру, вредност проп користи тренутни датум. Такође, користећи реквизите за дан, месец и годину, наводите да желите да се година, месец и дан приказују у дугом формату.
Поред дана, месеца и године, други реквизити такође форматирају изглед датума. Ево реквизита и вредности које прихватају:
- година: „нумерички“, „2-цифрени“
- месец: „нумерички“, „двоцифрени“, „уски“, „кратки“, „дуги“
- дан: „нумерички“, „2-цифрени“
- сат: „нумерички“, „2-цифрени“
- минут: „нумерички“, „2-цифрени“
- други: „нумерички“, „2-цифрени“
- тимеЗонеНаме: „кратко“, „дуго“
Такође можете да користите компоненту ФорматтедДате за форматирање и приказ времена:
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;
Интернационализујте своје Реацт апликације за ширу публику
Научили сте како да инсталирате и подесите Реацт-Интл библиотеку у вашој Реацт апликацији. Реацт-интл олакшава форматирање бројева, датума и валута ваше Реацт апликације. Можете форматирати податке на основу корисничког локала користећи компоненте ФорматтедМессаге, ФорматтедНумбер и ФорматтедДате.
Реацт програмери често праве грешке које могу довести до озбиљних последица. На пример, неуспешно ажурирање стања. Важно је да будете свесни ових уобичајених грешака и да их исправите рано како бисте избегли скупе проблеме.