React Intl – це відома бібліотека, котра пропонує ряд компонентів та інструментів для реалізації інтернаціоналізації в проєктах React. Інтернаціоналізація, часто скорочено i18n, означає процес адаптації програмного забезпечення до різних мовних та культурних особливостей.
Застосовуючи React Intl, можна без проблем налагодити підтримку багатьох мов та локалізацій у вашому React-застосунку.
Інсталяція React Intl
Для використання можливостей React Intl, необхідно її спочатку встановити. Це можна зробити за допомогою різних менеджерів пакетів, таких як npm, yarn або pnpm.
Для встановлення через npm, скористайтеся наступною командою в терміналі:
npm install react-intl
Для інсталяції за допомогою yarn, введіть цю команду:
yarn add react-intl
Застосування бібліотеки React Intl
Після успішної інсталяції React Intl, ви можете інтегрувати її компоненти та функції у свій застосунок. React Intl має багато спільних рис з API JavaScript Intl.
Серед корисних компонентів, які надає React Intl, виділяються FormattedMessage та IntlProvider.
Компонент FormattedMessage відповідає за відображення перекладених текстових рядків, а IntlProvider забезпечує необхідну інформацію про переклади та форматування для всього застосунку.
Перед тим як почати використовувати FormattedMessage та IntlProvider, важливо створити файл з перекладами. Цей файл містить всі переклади, потрібні вашій програмі. Можна мати окремі файли для кожної мови чи локалізації, або ж один файл, що міститиме всі переклади.
Наприклад:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
У цьому прикладі представлено два об’єкти перекладів: `messagesInFrench` та `messagesInItalian`. Заповнювач `{name}` в рядку привітання може бути замінений на динамічне значення під час виконання програми.
Для використання перекладів в застосунку, потрібно обернути кореневий компонент в IntlProvider. Цей компонент використовує три основні властивості: `locale`, `defaultLocale` та `messages`.
`locale` приймає рядок, що ідентифікує локаль користувача, `defaultLocale` визначає запасну локаль на випадок, якщо потрібна локаль користувача не знайдена, а `messages` приймає об’єкт з перекладами.
Ось приклад використання 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>
);
У цьому прикладі `IntlProvider` отримує `locale` як “fr”, переклади з `messagesInFrench` та стандартну мову “en”.
Можна передавати кілька локалей чи об’єктів перекладу, і `IntlProvider` автоматично визначить мову браузера користувача та відобразить відповідні переклади.
Для відображення перекладених рядків у програмі, застосовується компонент FormattedMessage. Він приймає властивість `id`, яка відповідає ідентифікатору повідомлення в об’єкті `messages`.
Компонент також приймає властивості `defaultMessage` та `values`. `defaultMessage` визначає текст за замовчуванням, якщо переклад недоступний для поточної мови, а `values` надає динамічні значення для заповнювачів в перекладених повідомленнях.
Наприклад:
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;
У цьому коді, властивість `id` компонента `FormattedMessage` використовує ключ “greeting” з об’єкта `messagesInFrench`, а властивість `values` замінює заповнювач `{name}` на значення “John”.
Форматування чисел за допомогою компонента FormattedNumber
React Intl також пропонує компонент FormattedNumber, який використовується для форматування чисел залежно від поточної мови. Компонент приймає різні параметри для налаштування форматування, такі як стиль, валюта, а також мінімальна і максимальна кількість знаків після коми.
Ось декілька прикладів:
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;
У цьому прикладі використовується компонент FormattedNumber, який приймає властивість `value`, що визначає число для форматування.
За допомогою властивості `style` можна налаштувати вигляд відформатованого числа. `style` може бути заданий як десяткове число, відсоток або валюта.
Якщо встановити `style` як “currency”, `FormattedNumber` форматує число як грошову суму, використовуючи код валюти, вказаний у властивості `currency`:
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` форматує число, використовуючи стиль валюти та код валюти USD.
Також можна форматувати числа з певною кількістю знаків після коми, використовуючи атрибути `minimumFractionDigits` та `maximumFractionDigits`.
`minimumFractionDigits` задає мінімальну кількість цифр після коми, що потрібно відображати, а `maximumFractionDigits` – максимальну кількість цифр після коми.
Якщо число має менше знаків після коми, ніж вказано у `minimumFractionDigits`, React Intl доповнить його нулями. Якщо ж число має більше знаків після коми, ніж вказано у `maximumFractionDigits`, бібліотека округлить число.
Ось приклад використання цих властивостей:
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;
Форматування дат за допомогою компонента FormattedDate
React Intl дозволяє форматувати дати у зрозумілий та послідовний спосіб. Компонент FormattedDate надає простий та ефективний метод форматування. Він працює подібно до бібліотек для роботи з датами та часом, таких як Moment.js.
Компонент FormattedDate використовує різні параметри, такі як `value`, `day`, `month` та `year`. `value` приймає дату, яку потрібно відформатувати, а інші параметри налаштовують формат її відображення.
Наприклад:
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;
У цьому прикладі властивість `value` використовує поточну дату. Атрибути `day`, `month` та `year` вказують на бажання відобразити рік, місяць та день у повному форматі.
Разом з `day`, `month` та `year` існують інші атрибути, що також впливають на вигляд дати. Ось параметри та значення, які вони приймають:
- рік: “numeric”, “2-digit”
- місяць: “numeric”, “2-digit”, “narrow”, “short”, “long”
- день: “numeric”, “2-digit”
- година: “numeric”, “2-digit”
- хвилина: “numeric”, “2-digit”
- секунда: “numeric”, “2-digit”
- timeZoneName: “short”, “long”
Компонент FormattedDate також можна використовувати для форматування та відображення часу:
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;
Інтернаціоналізуйте свої React-програми для охоплення ширшої аудиторії
Ви ознайомились з процесом встановлення та налаштування бібліотеки React-Intl у вашому React-застосунку. React-intl суттєво спрощує форматування чисел, дат та валют. За допомогою компонентів FormattedMessage, FormattedNumber та FormattedDate можна форматувати дані на основі мови користувача.
Розробники React інколи допускають помилки, що можуть спричинити серйозні наслідки. Наприклад, некоректне оновлення стану. Важливо знати про ці поширені помилки та вчасно їх виправляти, аби уникнути небажаних проблем.