);
};
```
> Посилання на документацію:
>
> - [Хук `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md)
> - [Хук `getLocaleName`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/intlayer/getLocaleName.md)
> - [Хук `getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/intlayer/getLocalizedUrl.md)
> - [Хук `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/intlayer/getHTMLTextDir.md)
> - [Атрибут `hrefLang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
> - [Атрибут `lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
> - [Атрибут `dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
> - [Атрибут `aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
### (Необов'язково) Крок 9: Змінити атрибути мови та напрямку HTML
Коли ваш застосунок підтримує кілька мов, важливо оновлювати атрибути `lang` та `dir` тега ``, щоб вони відповідали поточній локалі. Це забезпечує:
- **Доступність**: Екранні читачі та допоміжні технології покладаються на правильний атрибут `lang` для точного вимови та інтерпретації контенту.
- **Відображення тексту**: Атрибут `dir` (напрямок) забезпечує правильний порядок відображення тексту (наприклад, зліва направо для англійської, справа наліво для арабської або івриту), що важливо для читабельності.
- **SEO**: Пошукові системи використовують атрибут `lang` для визначення мови вашої сторінки, допомагаючи показувати правильний локалізований контент у результатах пошуку.
Оновлюючи ці атрибути динамічно при зміні локалі, ви гарантуєте послідовний та доступний досвід для користувачів усіх підтримуваних мов.
#### Реалізація хука
Створіть власний хук для керування атрибутами HTML. Хук слухає зміни локалі та відповідно оновлює атрибути:
```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
import { useEffect } from "react";
import { useLocale } from "react-intlayer";
import { getHTMLTextDir } from "intlayer";
/**
* Оновлює атрибути `lang` та `dir` елемента HTML на основі поточної локалі.
* - `lang`: Повідомляє браузери та пошукові системи про мову сторінки.
* - `dir`: Забезпечує правильний порядок читання (наприклад, 'ltr' для англійської, 'rtl' для арабської).
*
* Це динамічне оновлення важливе для правильного відображення тексту, доступності та SEO.
*/
export const useI18nHTMLAttributes = () => {
const { locale } = useLocale();
useEffect(() => {
// Оновити атрибут мови на поточну локаль.
document.documentElement.lang = locale;
// Встановити напрямок тексту на основі поточної локалі.
document.documentElement.dir = getHTMLTextDir(locale);
}, [locale]);
};
```
```jsx fileName="src/hooks/useI18nHTMLAttributes.msx" codeFormat="esm"
import { useEffect } from "react";
import { useLocale } from "react-intlayer";
import { getHTMLTextDir } from "intlayer";
/**
* Оновлює атрибути `lang` та `dir` елемента HTML на основі поточної локалі.
* - `lang`: Повідомляє браузери та пошукові системи про мову сторінки.
* - `dir`: Забезпечує правильний порядок читання (наприклад, 'ltr' для англійської, 'rtl' для арабської).
*
* Це динамічне оновлення важливе для правильного відображення тексту, доступності та SEO.
*/
export const useI18nHTMLAttributes = () => {
const { locale } = useLocale();
useEffect(() => {
// Оновити атрибут мови на поточну локаль.
document.documentElement.lang = locale;
// Встановити напрямок тексту на основі поточної локалі.
document.documentElement.dir = getHTMLTextDir(locale);
}, [locale]);
};
```
```jsx fileName="src/hooks/useI18nHTMLAttributes.csx" codeFormat="commonjs"
const { useEffect } = require("react");
const { useLocale } = require("react-intlayer");
const { getHTMLTextDir } = require("intlayer");
/**
* Оновлює атрибути `lang` та `dir` елемента HTML на основі поточної локалі.
* - `lang`: Повідомляє браузери та пошукові системи про мову сторінки.
* - `dir`: Забезпечує правильний порядок читання (наприклад, 'ltr' для англійської, 'rtl' для арабської).
*
* Це динамічне оновлення важливе для правильного відображення тексту, доступності та SEO.
*/
const useI18nHTMLAttributes = () => {
const { locale } = useLocale();
useEffect(() => {
// Оновити атрибут мови на поточну локаль.
document.documentElement.lang = locale;
// Встановити напрямок тексту на основі поточної локалі.
document.documentElement.dir = getHTMLTextDir(locale);
}, [locale]);
};
module.exports = { useI18nHTMLAttributes };
```
#### Використання хука у вашому застосунку
Інтегруйте хук у ваш основний компонент, щоб атрибути HTML оновлювалися щоразу, коли змінюється локаль:
```tsx fileName="src/App.tsx" codeFormat="typescript"
import type { FC } from "react";
import { IntlayerProvider, useIntlayer } from "react-intlayer";
import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
import "./App.css";
const AppContent: FC = () => {
// Застосувати хук для оновлення атрибутів `lang` та `dir` тега на основі локалі.
useI18nHTMLAttributes();
// ... Решта вашого компонента
};
const App: FC = () => (
> ```
> Щоб дізнатися більше про хук `useIntlayer`, перегляньте [документацію](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useIntlayer.md).
### (Необов'язково) Крок 6: Зміна мови вашого контенту
Щоб змінити мову контенту, ви можете використати функцію `setLocale`, що надається хуком `useLocale`. Ця функція дозволяє встановити locale застосунку та відповідно оновити контент.
```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
import { Locales } from "intlayer";
import { useLocale } from "react-intlayer";
const LocaleSwitcher = () => {
const { setLocale } = useLocale();
return (
);
};
```
```jsx fileName="src/components/LocaleSwitcher.mjx" codeFormat="esm"
import { Locales } from "intlayer";
import { useLocale } from "react-intlayer";
const LocaleSwitcher = () => {
const { setLocale } = useLocale();
return (
);
};
```
```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
const { Locales } = require("intlayer");
const { useLocale } = require("react-intlayer");
const LocaleSwitcher = () => {
const { setLocale } = useLocale();
return (
);
};
```
> Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md).
### (Необов'язково) Крок 7: Додайте локалізовану маршрутизацію до вашого додатку
Мета цього кроку — створити унікальні маршрути для кожної мови. Це корисно для SEO та SEO-дружніх URL-адрес.
Приклад:
```plaintext
- https://example.com/about
- https://example.com/es/about
- https://example.com/fr/about
```
> За замовчуванням маршрути не мають префікса для локалі за замовчуванням. Якщо ви хочете додати префікс і для локалі за замовчуванням, встановіть опцію `middleware.prefixDefault` в `true` у вашій конфігурації. Див. [документацію з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md) для докладнішої інформації.
Щоб додати локалізовану маршрутизацію у ваш застосунок, можна створити компонент `LocaleRouter`, який обгортає маршрути вашого застосунку й обробляє маршрутизацію на основі локалі. Ось приклад з використанням [React Router](https://reactrouter.com/home):
```tsx fileName="src/components/LocaleRouter.tsx" codeFormat="typescript"
// Імпорт необхідних залежностей та функцій
import { type Locales, configuration, getPathWithoutLocale } from "intlayer"; // Утиліти та типи з 'intlayer'
// Утиліти та типи з 'intlayer'
import type { FC, PropsWithChildren } from "react"; // Типи React для функціональних компонентів та пропсів
import { IntlayerProvider } from "react-intlayer"; // Провайдер контексту інтернаціоналізації
import {
BrowserRouter,
Routes,
Route,
Navigate,
useLocation,
} from "react-router-dom"; // Компоненти роутера для керування навігацією
// Деструктуризація конфігурації з Intlayer
const { internationalization, middleware } = configuration;
const { locales, defaultLocale } = internationalization;
/**
* Компонент, що обробляє локалізацію та обгортає дочірні елементи у відповідний контекст локалі.
*/
* Виконує визначення та перевірку локалі на основі URL.
*/
const AppLocalized: FC