Як використовувати React Intl для інтернаціоналізації ваших програм React

React Intl — це популярна бібліотека, яка надає набір компонентів і утиліт для інтернаціоналізації програм React. Інтернаціоналізація, також відома як i18n, — це процес адаптації програми до різних мов і культур.

Ви можете легко підтримувати кілька мов і локалей у своїй програмі React за допомогою ReactIntl.

Зміст

Встановлення React Intl

Щоб використовувати бібліотеку React Intl, її потрібно спочатку встановити. Ви можете зробити це за допомогою кількох менеджерів пакетів: npm, yarn або pnpm.

Щоб встановити його за допомогою npm, виконайте цю команду у своєму терміналі:

 npm install react-intl

Щоб встановити його за допомогою пряжі, виконайте цю команду:

 yarn add react-intl

Як використовувати React Intl Library

Після встановлення бібліотеки 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} у рядку привітання під час виконання на динамічне значення.

8 інструментів відеозвороту для кращого звітування про помилки

Щоб використовувати переклади у своїй програмі, ви повинні обернути кореневий компонент вашої програми компонентом IntlProvider. Компонент IntlProvider використовує три властивості React: 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 локаль fr, переклад messagesInFrench і мову за замовчуванням en.

Ви можете передати більше однієї локалі або об’єкта перекладу, і IntlProvider автоматично визначить мову браузера користувача та використає відповідні переклади.

Щоб відобразити перекладені рядки у вашій програмі, використовуйте компонент FormattedMessage. Компонент FormattedMessage приймає властивість ідентифікатора, що відповідає ідентифікатору повідомлення в об’єкті messages.

Компонент також приймає defaultMessage і значення prop. Опис 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 використовує ключ привітання з об’єкта messagesInFrench, а властивість values замінює заповнювач {name} на значення «John».

Форматування чисел за допомогою компонента FormattedNumber

React Intl також надає компонент FormattedNumber, який можна використовувати для форматування чисел на основі поточної мови. Компонент приймає різні параметри для налаштування форматування, наприклад стиль, валюту та мінімальний і максимальний дробові цифри.

Чому ваш рахунок Acorns втрачає гроші?

Ось кілька прикладів:

 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, який приймає властивість значення, що визначає число, яке потрібно відформатувати.

Використовуючи властивість стилю, ви можете налаштувати вигляд відформатованого числа. Ви можете встановити властивість стилю як десяткове число, відсоток або валюта.

Коли ви встановлюєте властивість стилю на валюту, компонент FormattedNumber форматує число як значення грошової одиниці, використовуючи код, указаний у властивості валюти:

 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.

Як скопіювати та вставити на Mac

Компонент FormattedDate використовує багато параметрів, наприклад значення, день, місяць і рік. Значення параметра приймає дату, яку ви хочете відформатувати, а інші параметри налаштовують його форматування.

Наприклад:

 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-значний»
другий: «числовий», «2-значний»
timeZoneName: «короткий», «довгий»

Ви також можете використовувати компонент 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 полегшує форматування чисел, дат і валют вашої програми React. Ви можете форматувати дані на основі мови користувача за допомогою компонентів FormattedMessage, FormattedNumber і FormattedDate.

Розробники React часто допускають помилки, які можуть призвести до серйозних наслідків. Наприклад, неправильне оновлення стану. Важливо знати про ці поширені помилки та виправляти їх завчасно, щоб уникнути дорогих проблем.